Laggy Safari 动画

Question

我知道还有其他与此相同的帖子，但我想问一下我的 Jquery 代码可能是问题所在。

Chrome、Firefox 甚至 IE 10+ 都可以顺利使用这种方法。 Safari 非常滞后，我认为它可能是 jquery。因为“top:”值需要一点时间来更新。不确定是什么原因造成的。

这里是 Jquery：

 $(document).scroll(function() {

    var windowSize = $(window).width();

    if (windowSize > 1019) {

        if ($(document).scrollTop() > 380) {

            if ($('.sub-nav').closest('.standard-content').height() > ($(document).scrollTop() + $('.sub-nav').outerHeight()+70)){
                $('.sub-nav').css('top', $(document).scrollTop() - 400);
            }     
        }

        else {
            $('.sub-nav').css('top', 0);
        }
    }   
});

CSS：

.side-nav {
            height: 100%;
            position: relative;
            width: 100%;
        }

        .sub-nav {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            @include transition(top, .1s, linear);
        }

HTML：

<div class="sidebar match-height">
                    <aside>
                        <h3>Sub-menu title</h3>
                        <div class="side-nav">
                            <ul class="sub-nav">
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a>
                                    <ul>
                                        <li><a href="#">Sub-menu item</a></li>
                                        <li><a href="#">Sub-menu item</a></li>
                                        <li><a href="#">Sub-menu item</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Menu item</a></li>
                                <li><a href="#">Menu item</a></li>
                            </ul>
                        </div>
                    </aside>
                </div>

Safari 动画真的很糟糕.. 不知道为什么。正如我提到的，所有其他浏览器似乎都很好。也许滞后的原因是我的 JQuery。 CSS 我用 -webkit-backface-visibility: hidden; 尝试了一切。 -webkit-transform: translate3d(0, 0, 0);等等……

提前谢谢你。

Answer 1

您应该更改transform 属性，而不是top 属性。

所以制作你的 javascript 代码：

$(document).scroll(function() {

    var windowSize = $(window).width();
    var scroll = $(document).scrollTop();

    if (scroll > 380) {

        if ($('.content').height() > ($('.sub-nav').outerHeight()+70)){
            $('.sub-nav').css('transform', 'translate3d(0, ' + (scroll - 400) + 'px, 0)');
        }     
    } else {
        $('.sub-nav').css('transform', 'translate3d(0,0,0)');
    }
});