7

Safari に奇妙な css イメージの問題があり、これに関するオンラインの情報はどこにも見つかりませんでした。

各ジュエリーの下にはサムネイルの小さなギャラリーがあります。そのスペースに収まりきらないほど多くのサムネイルがある場合は、外側の div の左マージンを調整して前後にスライドさせるように JS を設定しました (smoothdivscroll によく似ていますが、それほど複雑ではありません)。

何らかの理由で Safari で、小さなサムネイル ギャラリーの最初の画像が静止したままになり、他の画像がその上をスクロールします。本当にがらくたに見えます。そして、私はその理由を理解できません。Safariのバグでしょうか？

CSS の問題のように感じます。このスライド機能を追加する前は、5 つの画像しか制限されておらず、Safari でも重複して歪んで読み込まれていたためです...

http://jeandousset.com/jewellery/engagement-rings/

サンプル 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();
});
4

1 に答える 1

3

なぜこれが機能したのか、これだけだったのかはわかりませんが、タグに width と height を追加し、アニメーションを jQuery から css3 に移動しました。

それはトリックを行うように見えました。上のリンクにアクセスして見ることができます。

試してくれてありがとう。

そして、これらのコード編集を行ってくれた @JoshC に感謝します。

于 2013-09-26T03:31:57.270 に答える