-webkit-backface-visibility的潜在魔力

我想知道为什么webkit-backface-visibility像那种通用的阿司匹林可以解决或加剧各种各样的异构问题,主要与工件和闪烁有关.

我已经阅读并理解了backface-visibility它的真正含义:当不面向屏幕时,它控制着三维旋转的物体.有一个不错的,简单明了的演示在这里

但我很好奇为什么,每次我在CSS世界中都有奇怪的故障,完全与3D旋转及其隐藏的背面无关,应用于backface-visibility有问题的层或其中一个祖先通常会帮助或使事情变得更糟,但很少会做任何事情.我在谈论类似的事情

动画闪烁

固定层Z-Index问题

显示:无<>可见的闪烁和瑕疵

滚动闪烁

有趣的是,总是在我简陋的经历中,backface-visibility:hidden倾向于解决固定定位相关的东西,并且backface-visibility:visible是闪烁的"最佳".同样有趣的是,在Chrome和Safari中,副作用是不同的,但男孩有!

我在一个Visual HTML创建者工作,所以情况是我有闪烁/工件是相当复杂的(即几个层上的动画,固定元素后面的滚动div,绝对超过z-index ....)

有人可以开导我吗？

我不确定你在谈论什么样的魔法,但在某些情况下,CSS backface-visibility属性可以帮助将DOM元素提升到一个层,以便浏览器在渲染该元素时可以采用GPU的冒险.

注意:只有hidden值会提升到图层,而不是visible.

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

还有一些其他CSS属性可以执行相同的操作,例如translateZ(0)或translate3d(0,0,0).这些都是hacks,将被新的CSS属性取代will-change.

如果您正在使用CSS进行动画制作,那么性能方面的最佳选择是仅更改这两个 CSS属性:transform和opacity.但随着浏览器的不断变化,未来也可能会发生变化.目标是在动画时使每个CSS属性尽可能平滑(理想情况下为60FPS).我知道Chrome团队正在努力解决这个问题,但不确定其他供应商.