我想知道为什么webkit-backface-visibility
就像多用途阿司匹林那样可以解决或加剧各种各样的异构问题,主要与工件和闪烁有关。
我已经阅读并理解了backface-visibility
的真正含义:它控制着不旋转的物体在不面向屏幕时可见。有一个很好的,直接的演示here
但我很好奇为什么,每次我在CSS世界中都有奇怪的故障,完全与3D旋转及其隐藏的背面无关,将backface-visibility
应用于有问题的层或其中一个它的祖先通常会帮助或使事情变得更糟,但很少会做任何事情。我在谈论像
有趣的是,总是在我的谦逊体验中,backface-visibility:hidden
倾向于解决与固定定位相关的问题,backface-visibility:visible
对于闪烁来说是“最好的”。同样有趣的是,在Chrome和Safari中,副作用是不同的,但是有男孩!
我在Visual HTML创建者中工作,所以情况是我有闪烁/工件相当复杂(即几个层上的动画,固定元素后面的滚动div,绝对超过z-index固定... 。)
任何人都可以启发我吗?
答案 0 :(得分:9)
我不确定你在谈论什么样的魔术,但在某些情况下 CSS backface-visibility
属性可以帮助推广 DOM 元素到一个图层,以便浏览器在渲染该元素时可以采用 GPU 的冒险。
注意:只有hidden
值会提升为某个图层,而不是visible
。
此外,在某些情况下,此属性可以修复元素周围的锯齿状边缘 - 这一切都归功于 GPU 渲染。
还有一些其他 CSS 属性可以执行相同的操作,例如translateZ(0)
或translate3d(0,0,0)
。这些都是黑客攻击,将被新的CSS属性will-change
替换。
如果您使用CSS制作动画,就性能而言,最佳选择是仅更改 2 CSS 属性:{{ 1}}和transform
。
但随着浏览器的不断变化,未来也可能会发生变化。目标是在动画时使每个CSS属性尽可能平滑(理想情况下为60FPS)。我知道Chrome团队正在努力解决这个问题,但对其他供应商并不确定。