-webkit-backface-visibility的潜在魔力

时间:2015-02-14 01:44:26

标签: css html5 css3 webkit flicker

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

我已经阅读并理解了backface-visibility的真正含义:它控制着不旋转的物体在不面向屏幕时可见。有一个很好的,直接的演示here

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

这样的事情
  • 动画闪烁
  • 固定层Z-Index问题
  • 显示:无<>可见的闪烁和文物
  • 滚动闪烁

有趣的是,总是在我的谦逊体验中,backface-visibility:hidden倾向于解决与固定定位相关的问题,backface-visibility:visible对于闪烁来说是“最好的”。同样有趣的是,在Chrome和Safari中,副作用是不同的,但是有男孩!

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

任何人都可以启发我吗?

1 个答案:

答案 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团队正在努力解决这个问题,但对其他供应商并不确定。