-webkit-backface-visibility 的潜在魔力

Posted 2023-03-06

【中文标题】-webkit-backface-visibility 的潜在魔力

【英文标题】：The underlying magic of -webkit-backface-visibility

【发布时间】：2015-04-15 04:47:37

【问题描述】：

我想知道为什么webkit-backface-visibility 像万能的阿司匹林一样解决或使各种异质性问题变得更糟，主要与伪影和闪烁有关。

我已阅读并理解 backface-visibility 的真正用途：它控制 3D 旋转对象在不面对屏幕时是否可见。有一个很好的简单演示 here

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

动画闪烁 修复了层 Z-Index 问题 显示：无 可见闪烁和伪影 滚动闪烁

有趣的是，在我的卑微经验中，backface-visibility:hidden 倾向于解决与固定定位相关的问题，而backface-visibility:visible 是“最好的”闪烁。同样有趣的是，在 Chrome 和 Safari 中，副作用是不同的，但天哪！

我在 Visual html 创建器中工作，所以我有闪烁/伪影的情况相当复杂（即，多层动画、固定元素后面的滚动 div、绝对固定的 z-index ... .)

谁能给我指点一下？

【问题讨论】：

groups.google.com/a/chromium.org/forum/#!topic/blink-dev/… 我在 google 群组上找到了这篇文章，Chrome 图形工程师 Nat Duca 说背面可见性有一些实现上的怪癖，如果这对你来说仍然很有趣的话。

【参考方案1】：

我不确定你说的是哪种魔法，但在某些情况下 CSS backface-visibility 属性可以帮助将 DOM 元素提升为一个层，以便浏览器在渲染该元素时可以利用 GPU。

注意：只有hidden 值会提升到层，visible 不会。

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

还有一些其他 CSS 属性可以做同样的事情，例如 translateZ(0) 或 translate3d(0,0,0)。这些都是 hack，将被新的 CSS 属性 will-change 取代。

如果您使用 CSS 制作动画，就性能而言，最好的选择是仅更改这些 2 CSS 属性：@987654327 @ 和 opacity。 但随着浏览器的不断变化，这也可能在未来发生变化。目标是在制作动画时使每个 CSS 属性尽可能平滑（理想情况下为 60FPS）。我知道 Chrome 团队正在为此努力工作，但不确定其他供应商。

【讨论】：

不错的博文...在这段时间里，我发现了更多“webkit 背面可见性”的魔法，例如 background-attachment:fixed 如果父母有 wbkv:hidden 则停止工作.. 我明白现在发生了什么事，但令人惊讶的是这个标签的一百个副作用，它们在 safari 和 chrome 中是不同的，甚至有时需要隐藏背面，而另一个 backface:vis ......这总是在谈论非常复杂的页面.. . will-change 似乎有点帮助。