Запаздывающая анимация сафари

Я знаю, что есть и другие сообщения, подобные этому, но я хотел спросить, может быть, проблема в моем коде 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>

Анимация в сафари очень плохая... Не знаю почему. Как я уже говорил, все остальные браузеры работают нормально. Возможно, причиной отставания является мой JQuery. CSS Я пробовал все с -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); и т.д...

Заранее спасибо.


javascript html jquery css safari
person Tautvydas Slegaitis    schedule 29.10.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны изменить атрибут 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)');
    }
});
person jehna1    schedule 29.10.2015
comment
У меня есть только translate3d(0,0,0) для аппаратного ускорения. Он не делает ничего другого. - person Tautvydas Slegaitis; 29.10.2015
comment
Вы должны изменить transform вместо top. Это потому, что его визуальный результат такой же, но производительность намного лучше. - person jehna1; 29.10.2015
comment
Вот что я хочу сказать: просто доверься мне. Когда это сработает, вы можете погуглить css, зачем использовать перевод, а не позицию, чтобы узнать больше. - person jehna1; 29.10.2015
comment
Привет, этот ответ сработал для тебя? Если вы считаете, что этот ответ решил проблему, отметьте его как «принятый», нажав зеленую галочку. - person jehna1; 29.10.2015