Из-за чего может возникать подергивание при скролле?

Question

[Odinokun]

Подскажите пожалуйста.
Из-за чего при скролле дергается шапка таблицы?
Вот на этой странице.
Подергивание возникает при прокрутке колесом мыши или стрелками клавиатуры, когда тянешь скролл в браузере, все нормально.

Самое любопытное что абсолютно такая-же таблица в русской версии сайта работает отлично.

Вот скрипт отвечающий за фиксацию верхней строки.

$(window).on('scroll', function() {
    var tableTop = $("#table-compare").offset();
    var winScroll = $(window).scrollTop();
    var tableHeaderTop = tableTop.top + winScroll;

    if (tableTop.top <= winScroll) {
        $("#table-compare__header").offset({top:winScroll})
    }
    else {
        $("#table-compare__header").offset({top:tableTop.top})
    }
});

PS Сразу скажу, что через position: fixed; зафиксировать строку не мог, т.к. она должна скроллится по горизонтали при уменьшении ширины браузера.
PPS А так же скрипт почему-то не работает в мобильных браузерах ((

Comments

[Kovalsky]

"PS Сразу скажу, что через position: fixed; зафиксировать строку не мог, т.к. она должна скроллится по горизонтали при уменьшении ширины браузера." - должна, но она и так не скроллится.

[ChrisMenschenin]

Тебе нужно "предупредить" браузер о трансформации, иначе он (тот же браузер) использует аппаратное ускорение. Используй тег will-change. Тут больше информации https://dev.opera.com/articles/ru/css-will-change-...

[Odinokun]

ChrisMenschenin: не помогает. Да и к тому-же у меня точно так-же сделана таблица на русской версии сайта и на нем все отрабатывает отлично.

Answer 1

[Nik]

joxi.ru/v29op7DUGGEawr
если убрать стрелку в русской версия такая же фигня происходит) просто добавь ее в тот сайт)

Comments

[Odinokun]

Точно. Помогло.
Для того, что бы убрать подергивание нужно было создать на странице любой фиксированный элемент.
Я сделал вот такой:

<div style="width:1px;height:1px;position:fixed;top:0;right: 0px;pointer-events:none;opacity:0;"></div>

Костыль конечно, но помогло.