Почему backface-visibility: hidden фиксит блики в хроме?

Question

[Alexander Mischuk]

Наверное, большинство знает, как фикситься баг с бликами в хроме для фиксировано спозиционированных элементов. Я говорю о backface-visibility: hidden.
Так вот, почему и как это срабатывает?

Comments

[Сергей Протько]

О каком именно из багов вы говорите? Я помню только о багах с анимациями, которые уже пофиксили в самом хроме.

[Alexander Mischuk]

Я говорю о мерцании блока на котором есть fixed. Иногда проявляется при скролле. Тот же translate3d(0, 0, 0) помогает, хотя это и анимации касается тоже.

[Nikolay Talanov]

Если не ошибаюсь, то баг лечится за счет того, что после применения свойства у элемента создается отдельный слой. То есть по идее translateZ(0)/translate3d(0,0,0) должны делать тоже самое.

[Alexander Mischuk]

Nikolay Talanov: Отдельный слой чего?

Answer 1

[Nikolay Talanov]

Итак, постараюсь ответить, пускай и топорно.
Конкретно причину возникновения багов с position: fixed при скролле я не знаю, хотя с ним и сталкивался частенько (но думается мне, что хром при скролле заново отрисовывает фиксированный элемент).
А фиксится он с помощью backface-visibility: hidden потому, что когда вы применяете к элементам свойства opacity/transform (и то что относится к трансформам, собственно backface-visibility), то браузер создает для этих элементов отдельный слой ?лэйаута? (не уверен в том, конкретно слой чего создается). И благодаря этому браузер не перерисовывает элемент заново при каждом скролл-ивенте (что убирает эффект моргания в хроме).

Comments

[Alexander Mischuk]

Вполне возможно, что так и есть. По той же причине пользую translateX/translateY вместо left/top. Почему-то не додумался до того, что при скролле наново перерисовывает фиксированный блок.
Спасибо :)

Answer 2

[aftemaht]

Уже писали об этом на хабре
habrahabr.ru/post/171813

Comments

[Сергей Протько]

У меня баг не воспроизвелся.

[Alexander Mischuk]

Ничего, что заметка о другом?