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(); });
No comments:
Post a Comment