Safari image overlapping issue
Having a weird css image issue with Safari, and haven't been able to find anything regarding this online anywhere.
Each jewellery piece has a small gallery of thumbnails underneath it. If there's more thumbnails than can fit in that space, I've set up JS to have them slide back and forth by adjusting the left margin of the outer div (a lot like smoothdivscroll, but not as complicated).
In Safari for some reason, the first image in the little thumbnail gallery is remaining static while the others scroll over it. looks really crap. And I can't figure why. Is it maybe a bug in Safari?
I do feel like it's a CSS problem, because before adding this sliding feature, we just had a limit to only 5 images and they would load overlapped and distorted in Safari as well...
http://jeandousset.com/jewellery/engagement-rings/
Sample HTML:
<div class="span12 offset6 product-images-container" style="margin-left: 140px;">
<div class="product-zoom-container">
<img id="eva-main-image" class="main-image" src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-round-cut-diamond-front.jpg" data-post-id="530" title="eva-engagement-ring-cushion-cut-diamond-angle-" alt="">
</div>
<div id="eva-gallery" class="product-gallery text-center">
<div class="scroll-products-right"></div>
<div class="scroll-products-left"></div>
<div class="scrollable-area">
<div class="product-gallery-inner" style="width: 420px; margin-left: -30px;">
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-angle-.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-angle-.jpg" title="eva-engagement-ring-cushion-cut-diamond-angle-" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-under.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-under.jpg" title="eva-engagement-ring-cushion-cut-diamond-under" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-angle.jpg" title="eva-engagement-ring-cushion-cut-diamond-angle" alt=""></a>
<a href="#" class="product-thumbnail active" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-round-cut-diamond-front.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-round-cut-diamond-front.jpg" title="eva-engagement-ring-round-cut-diamond-front" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-turned-profile.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-turned-profile.jpg" title="eva-engagement-ring-cushion-cut-diamond-turned-profile" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" title="eva-engagement-ring-asscher-cut-diamond-angle" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" title="eva-engagement-ring-asscher-cut-diamond-angle" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" title="eva-engagement-ring-asscher-cut-diamond-angle" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" title="eva-engagement-ring-asscher-cut-diamond-angle" alt="">
</a>
</div>
</div>
</div>
CSS:
.product-gallery {
*zoom: 1;
max-height: 70px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.product-gallery:before,
.product-gallery:after {
display: table;
content: "";
line-height: 0;
}
.product-gallery:after {
clear: both
}
.product-gallery .scrollable-area {
overflow: hidden;
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
}
.product-gallery .scroll-products-right,
.product-gallery .scroll-products-left {
position: absolute;
width: 30px;
height: 100%;
background: url(./../img/arrow-small-left.png) center center no-repeat #fff;
background-color: rgba(255,255,255,0.6);
top: 0;
left: 0;
z-index: 20;
opacity: .6;
filter: alpha(opacity=60);
}
.product-gallery .scroll-products-right:hover,
.product-gallery .scroll-products-left:hover {
cursor: pointer !important;
background-color: rgba(255,255,255,0.8);
opacity: 1;
filter: alpha(opacity=100);
}
.product-gallery .scroll-products-right {
right: 0;
left: auto;
background: url(./../img/arrow-small-right.png) center center no-repeat #fff;
background-color: rgba(255,255,255,0.6);
}
.product-gallery .product-thumbnail {
float: left;
max-width: 70px;
opacity: .5;
filter: alpha(opacity=50);
}
.product-gallery .product-thumbnail.active {
opacity: 1;
filter: alpha(opacity=100);
}
.product-gallery .product-thumbnail:before,
.product-gallery .product-thumbnail:after {
content: ""
}
JS:
Dousset.product = {
currentWindowWidthMin: null,
currentInterval: null,
init: function () {
$('#wrapper').on('click', '.product-thumbnail', Dousset.product.thumbClicked);
// $('.product-thumbnail').css({
// 'float': 'none',
// 'display': 'inline-block'
// });
$('#wrapper').on('mousedown', '.scroll-products-right', Dousset.product.scrollThumbsLeft);
$('#wrapper').on('mousedown', '.scroll-products-left', Dousset.product.scrollThumbsRight);
$('#wrapper').on('mouseup', '.scroll-products-left, .scroll-products-right', function(e){
clearTimeout(Dousset.product.currentInterval);
Dousset.product.currentInterval = null;
});
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$('#wrapper').on('click', '.scroll-products-right', Dousset.product.scrollThumbsLeftBatch);
$('#wrapper').on('click', '.scroll-products-left', Dousset.product.scrollThumbsRightBatch);
}
Dousset.product.setCurrentWindowWidthMin();
$(window).resize(Dousset.product.windowResized);
},
thumbClicked: function (e) {
e.preventDefault();
if (!$(this).hasClass('active')) {
var postId = $(this).data('post-id');
var newImg = $(this).data('image');
$('.main-image[data-post-id="'+postId+'"]').attr('src', newImg);
$('.product-thumbnail[data-post-id="'+postId+'"]').removeClass('active');
$(this).addClass('active');
}
},
scrollThumbsLeft: function (e) {
var $inner = $(this).siblings('.scrollable-area').find('.product-gallery-inner');
var maxMargin = $inner.width() - $(this).siblings('.scrollable-area').width();
Dousset.product.currentInterval = setInterval(function(){
if (parseInt($inner.css('margin-left'),10) >= -maxMargin) {
$inner.css({
'margin-left' : '-=1'
});
}
},10);
},
scrollThumbsRight: function (e) {
var $inner = $(this).siblings('.scrollable-area').find('.product-gallery-inner');
Dousset.product.currentInterval = setInterval(function(){
if (parseInt($inner.css('margin-left'),10) <= 0 ) {
$inner.css({
'margin-left' : '+=1'
});
}
},10);
},
scrollThumbsLeftBatch: function (e) {
var $inner = $(this).siblings('.scrollable-area').find('.product-gallery-inner');
var maxMargin = $inner.width() - $(this).siblings('.scrollable-area').width();
if (parseInt($inner.css('margin-left'),10) >= -maxMargin) {
$inner.animate({
'margin-left' : '-=70'
});
}
},
scrollThumbsRightBatch: function (e) {
var $inner = $(this).siblings('.scrollable-area').find('.product-gallery-inner');
if (parseInt($inner.css('margin-left'),10) <= 0 ) {
$inner.animate({
'margin-left' : '+=70'
});
}
},
setCurrentWindowWidthMin: function () {
Dousset.product.currentWindowWidthMin = $( window ).width() > 979 ? 980 : $( window ).width() > 767 ? 768 : 480;
},
windowResized: function () {
var oldWinMin = Dousset.product.currentWindowWidthMin;
Dousset.product.setCurrentWindowWidthMin();
}
}
$(document).ready(function(){
Dousset.product.init();
});
I can't say why this worked, or if it was only this, but I added a width and height to the tags, and moved the animation to css3 instead of jQuery.
That seemed to do the trick. You can visit the link above to see.
Thanks to anyone for trying.
And thanks to @JoshC for making those code edits.
链接地址: http://www.djcxy.com/p/15844.html上一篇: 按位移memmove
下一篇: Safari图像重叠问题