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)');
    }
});