-webkit-backface-visibility 的潜在魔力

Question

我想知道为什么webkit-backface-visibility 像万能的阿司匹林一样解决或使各种异质性问题变得更糟，主要与伪影和闪烁有关。

我已阅读并理解 backface-visibility 的真正用途：它控制 3D 旋转对象在不面对屏幕时是否可见。有一个很好的简单演示 here

但我很好奇为什么每次我在 CSS 世界中遇到奇怪的故障时，与 3D 旋转及其隐藏的背面完全无关，将backface-visibility 应用于有问题的层或其祖先之一通常会帮助或使事情变得更糟，但很少什么都不做。我说的是

• 动画闪烁
• 修复了层 Z-Index 问题
• 显示：无 可见闪烁和伪影
• 滚动闪烁

有趣的是，在我的卑微经验中，backface-visibility:hidden 倾向于解决与固定定位相关的问题，而backface-visibility:visible 是“最好的”闪烁。同样有趣的是，在 Chrome 和 Safari 中，副作用是不同的，但天哪！

我在 Visual HTML 创建器中工作，所以我有闪烁/伪影的情况相当复杂（即，多层动画、固定元素后面的滚动 div、绝对固定的 z-index ... .)

谁能给我指点一下？

Answer 1

我不确定你说的是哪种魔法，但在某些情况下 CSS backface-visibility 属性可以帮助将 DOM 元素提升为一个层，以便浏览器在渲染该元素时可以利用 GPU。

注意：只有hidden 值会提升到层，visible 不会。

此外，在某些情况下，此属性可以修复元素周围的锯齿状边缘 - 这一切都归功于 GPU 渲染。

还有一些其他 CSS 属性可以做同样的事情，例如 translateZ(0) 或 translate3d(0,0,0)。这些都是 hack，将被新的 CSS 属性 will-change 取代。

如果您使用 CSS 制作动画，就性能而言，最好的选择是仅更改这些 2 CSS 属性：@987654327 @ 和 opacity。 但随着浏览器的不断变化，这也可能在未来发生变化。目标是在制作动画时使每个 CSS 属性尽可能平滑（理想情况下为 60FPS）。我知道 Chrome 团队正在为此努力工作，但不确定其他供应商。