Основополагающая магия -webkit-backface-visibility

Я хотел бы знать, почему webkit-backface-visibility похож на этот универсальный аспирин, который решает или ухудшает все разнородные проблемы, в основном связанные с артефактами и мерцанием.

Я прочитал и понял, на что действительно backface-visibility предназначен: он контролирует, что 3D-повернутые объекты видны, когда они не обращены к экрану. Там хорошая демонстрационная демонстрация здесь

Но мне любопытно, почему каждый раз, когда у меня возникают странные глюки в мире CSS, полностью не связаны с 3D-вращениями и их скрытыми образами, применяя backface-visibility к проблемному слою или к одному из его предков обычно помогает ухудшать ситуацию, но редко ничего не делает. Я говорю о таких вещах, как

  • Анимация мерцает
  • Исправлены проблемы с Z-указателями уровня.
  • Дисплей: нет < > видимые мерцания и артефакты
  • Прокрутка мерцания

Интересно и всегда в моем скромном опыте, backface-visibility:hidden имеет тенденцию решать проблемы с фиксированным позиционированием, а backface-visibility:visible - "лучший" для мерцания. Также интересно, что в Chrome и Safari побочные эффекты разные, но есть мальчик!

Я работаю над создателем Visual HTML, поэтому ситуации были у меня мерцание/артефакты довольно сложны (т.е. анимация по нескольким слоям, прокрутка div за фиксированными элементами, абсолютная по фиксированному с z-index....)

Кто-нибудь может просветить меня?

Ответы

Ответ 1

Я не уверен, о какой магии вы говорите, но есть определенные случаи, когда свойство CSS backface-visibility может помочь продвинуть элемент DOM на слой, чтобы браузер может использовать графический процессор при отображении этого элемента.

ПРИМЕЧАНИЕ: только значение hidden будет повышать уровень, а не visible.

Кроме того, в некоторых случаях это свойство может исправить неровные края вокруг элементов - все благодаря графическому процессору.

Есть несколько других CSS свойств, которые делают то же самое, например translateZ(0) или translate3d(0,0,0). Это все хаки, и они будут заменены новым свойством CSS will-change.

Если вы выполняете анимацию с помощью CSS, лучшим вариантом с точки зрения производительности является изменение только этих 2 CSS свойств: transform и opacity. Но так как браузеры постоянно меняются, это может измениться и в будущем. Цель состоит в том, чтобы сделать каждое свойство CSS как можно более плавным (в идеале при 60FPS) при анимации. Я знаю, что команда Chrome очень усердно работает над этим, но не уверен насчет других поставщиков.