Почему не срабатывает аппаратное ускорение?

Question

[z_u_l]

Здравствуйте, есть табличка, у которой есть липкий заголовок при скролле. Всё работает, но почему-то этот заголовок при скролле дёргается. На мобильных устройствах это сильно заметно.
translate3d(0px, 0px, 0px) использую,
willChange: transform, opacity, scroll-position - добавляю при скролле.
Что я делаю не так? Как добиться плавности в данном случае?

Ссылка на пример

Answer 1

[Максим Тимофеев]

заголовок при скролле дёргается

может сквозняк?

не срабатывает аппаратное ускорение?

а должно? и как определили, что не срабатывает?

Что я делаю не так?

как минимум transition: all

Как добиться плавности в данном случае?

https://blog.gyrosco.pe/smooth-css-animations-7d8f...
А чем Вас не устроил position: sticky;? https://developer.mozilla.org/ru/docs/Web/CSS/position

Comments

[z_u_l]

Максим Тимофеев,

а должно? и как определили, что не срабатывает?

translate3d(0px, 0px, 0px) использую,
willChange: transform, opacity, scroll-position - добавляю при скролле.

Поэтому по идее должно. Как определил? При прокрутке же header таблички не плавно работает.

как минимум transition: all

Чем не устроил transition: all 0s ease;?

Как добиться плавности в данном случае?

Прочёл, но если честно, не совсем понимаю, что я должен применить к своей ситуации.

А чем Вас не устроил position: sticky;

А с каких под position: sticky; начал работать в div'e с overflow-y: hidden; а???

[Евгений]

Потому что у вас position: absolute стоит на таблице, поставьте fixed и всё нормально будет, ток код надо будет переписать

[Максим Тимофеев]

z_u_l,

Прочёл, но если честно, не совсем понимаю, что я должен применить к своей ситуации.

там как минимум четко дан ответ, почему нельзя использовать transition: all