Laggy Safari анимация

Знам, че има други публикации, същите като тази, но исках да попитам може би проблемът е в моя 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="/bg#">Menu item</a></li>
                                <li><a href="/bg#">Menu item</a></li>
                                <li><a href="/bg#">Menu item</a>
                                    <ul>
                                        <li><a href="/bg#">Sub-menu item</a></li>
                                        <li><a href="/bg#">Sub-menu item</a></li>
                                        <li><a href="/bg#">Sub-menu item</a></li>
                                    </ul>
                                </li>
                                <li><a href="/bg#">Menu item</a></li>
                                <li><a href="/bg#">Menu item</a></li>
                            </ul>
                        </div>
                    </aside>
                </div>

Safari анимацията е наистина лоша... Не знам защо. Както споменах, всички други браузъри изглеждат добре. Може би причината за изоставането е моят 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
Това, което казвам е: Просто ми се доверете. Когато работи, можете да търсите в google css защо да използвате превод вместо позиция, за да научите повече. - person jehna1; 29.10.2015
comment
Здравейте, този отговор свърши ли работа за вас? Ако смятате, че този отговор е решил проблема, моля, маркирайте го като „приет“, като щракнете върху зелената отметка. - person jehna1; 29.10.2015