-webkit-backface-visibility 的潜在魔力
The underlying magic of -webkit-backface-visibility
我想知道为什么 webkit-backface-visibility 就像万能阿司匹林，可以解决或加重各种异类问题，主要与伪像和闪烁有关。
我已阅读并理解 backface-visibility 的真正用途：它控制 3D 旋转对象在不面向屏幕时是否可见。有一个很好的、直接的演示 here
但我很好奇，为什么每次我在 CSS 世界中遇到奇怪的故障时，与 3D 旋转及其隐藏的背面完全无关，应用 backface-visibility 到有问题的层或其祖先之一通常会帮助或使事情变得更糟，但很少什么都不做。我说的是
- 动画闪烁
- 修复图层 Z-Index 问题
- 显示：none <> 可见闪烁和瑕疵
- 滚动闪烁
有趣的是，在我的拙劣经验中，backface-visibility:hidden倾向于解决固定位置相关的东西，而backface-visibility:visible是"best"用于闪烁。同样有趣的是，在 Chrome 和 Safari 中，副作用是不同的，但男孩是有的！
我在 Visual HTML 创建器中工作，所以出现闪烁/伪像的情况相当复杂（即，多个图层上的动画，固定元素后面的滚动 div，绝对超过 z-index ....)
谁能赐教一下？
我不确定你说的是哪种魔法，但在某些情况下 CSS backface-visibility 属性可以帮助将 DOM 元素提升到图层，以便浏览器在呈现该元素时可以利用 GPU。
注意：只有hidden值会提升到一个层，而不是visible。
此外，在某些情况下，此 属性 可以修复元素周围的锯齿状边缘 – 这一切都归功于 GPU 渲染。
还有一些其他 CSS 属性做同样的事情，例如 translateZ(0) 或 translate3d(0,0,0)。这些都是技巧，将被新的 CSS 属性 will-change.
取代
如果您使用 CSS 制作动画，就性能而言最好的选择是仅更改这些 2 CSS 属性：transform 和 opacity。
但随着浏览器不断变化，这在未来也可能会发生变化。目标是在制作动画时使每个 CSS 属性 尽可能平滑（理想情况下为 60FPS）。我知道 Chrome 团队正在为此努力工作，但不确定其他供应商。
我想知道为什么 webkit-backface-visibility 就像万能阿司匹林，可以解决或加重各种异类问题，主要与伪像和闪烁有关。
我已阅读并理解 backface-visibility 的真正用途：它控制 3D 旋转对象在不面向屏幕时是否可见。有一个很好的、直接的演示 here
但我很好奇，为什么每次我在 CSS 世界中遇到奇怪的故障时，与 3D 旋转及其隐藏的背面完全无关，应用 backface-visibility 到有问题的层或其祖先之一通常会帮助或使事情变得更糟，但很少什么都不做。我说的是
- 动画闪烁
- 修复图层 Z-Index 问题
- 显示：none <> 可见闪烁和瑕疵
- 滚动闪烁
有趣的是，在我的拙劣经验中，backface-visibility:hidden倾向于解决固定位置相关的东西，而backface-visibility:visible是"best"用于闪烁。同样有趣的是，在 Chrome 和 Safari 中，副作用是不同的，但男孩是有的！
我在 Visual HTML 创建器中工作，所以出现闪烁/伪像的情况相当复杂（即，多个图层上的动画，固定元素后面的滚动 div，绝对超过 z-index ....)
谁能赐教一下？
我不确定你说的是哪种魔法，但在某些情况下 CSS backface-visibility 属性可以帮助将 DOM 元素提升到图层，以便浏览器在呈现该元素时可以利用 GPU。
注意：只有hidden值会提升到一个层，而不是visible。
此外，在某些情况下，此 属性 可以修复元素周围的锯齿状边缘 – 这一切都归功于 GPU 渲染。
还有一些其他 CSS 属性做同样的事情，例如 translateZ(0) 或 translate3d(0,0,0)。这些都是技巧，将被新的 CSS 属性 will-change.
如果您使用 CSS 制作动画，就性能而言最好的选择是仅更改这些 2 CSS 属性：transform 和 opacity。
但随着浏览器不断变化，这在未来也可能会发生变化。目标是在制作动画时使每个 CSS 属性 尽可能平滑（理想情况下为 60FPS）。我知道 Chrome 团队正在为此努力工作，但不确定其他供应商。