我想知道为什么webkit-backface-visibility就像多用途阿司匹林一样,可以解决或加剧各种各样的异构问题,主要与工件和闪烁有关.
我已经阅读并理解了背面可视性的用途：它可以控制在不面向屏幕时可见的3D旋转对象.有一个很好的,直接的演示here
但我很好奇为什么,每次我在CSS世界中都有奇怪的故障,与3D旋转及其隐藏的背面完全无关,对有问题的层或其祖先的一个应用背面可见性通常会帮助或使事情变得更糟,但很少没有.我在谈论类似的事情
>动画闪烁
>固定层Z-Index问题
>显示：无<>可见的闪烁和文物
>滚动闪烁
有趣的是,总是在我简陋的经历中,背面可视性：隐藏倾向于解决固定定位相关的东西,背面可视性：可见是闪烁的“最佳”.同样有趣的是,在Chrome和Safari中,副作用是不同的,但男孩有！
我在一个Visual HTML创建者工作,所以情况是我有闪烁/工件是相当复杂的(即几个层上的动画,固定元素后面的滚动div,绝对超过z-index ….)
有人可以开导我吗？
解决方法
我不确定你在谈论什么样的魔法,但在某些情况下,CSS backface-visibility属性可以帮助将DOM元素提升到一个层,以便浏览器在渲染该元素时可以采用GPU的冒险.
注意：只有隐藏值才会提升为图层,不可见.
此外,在某些情况下,此属性可以修复元素周围的锯齿状边缘 – 这一切都归功于GPU渲染.
还有一些其他CSS属性可以执行相同的操作,例如translateZ(0)或translate3d(0,0).这些都是黑客攻击,并将被新的CSS属性替换.
如果使用CSS进行动画制作,性能方面的最佳选择是仅更改这两个CSS属性：变换和不透明度.但随着浏览器的不断变化,未来可能也会发生变化.目标是在动画时使每个CSS属性尽可能平滑(理想情况下为60FPS).我知道Chrome团队正在努力工作,但不确定其他供应商.
