在 * 元素上使用背面可见性

Question

我在一个网站上做了一些工作，该网站有一个随页面滚动的固定侧导航。

现在我注意到 webkit 渲染引擎 (see this) 中的 position: fixed 元素存在一些问题，为了解决这些问题 - 如 post 中所示，我使用 -webkit-backface-visibility: hidden;.

当使用固定元素时，post 对 webkit 的描述是，它会尝试检查损坏区域以查看它们是否在同一复合层内，并在滚动时将它们统一为 1 个绘制矩形。

现在我的两个组件都没有任何错误或问题，但我想知道如果像 box-sizing: border-box; 我要将以下内容添加到我的 CSS 中会怎样：

* {
    backface-visibility: hidden;
}

去除前缀

这会对我的网页产生重大影响吗？
这会修复错误吗？ （webkit 有时会做一些很奇怪的事情）
这可能有哪些其他优点/缺点？

提前致谢，如果我的问题太含糊，我会尽快收到你们的回复 ;)

Answer 1

像这样的性能点击不太可能被普通用户记录下来，但如果您正在追求索引分数，则可能会 ping 为伤害您的东西。

对于您列出的场景，如果您使用像 LESS 或 SASS 这样的预编译器，我建议您将固定规则放在混合或继承中，例如 SASS :

.fixed {
  position: fixed;
  -webkit-backface-visibility: hidden;
}
.my-totally-bitchin-header {
  @extend .fixed
  /* Does other cool stuff too */
}

这样，您就避免了包罗万象的 splat CSS 选择器的（公认的微小）命中，并且您可以明智而轻松地将规则应用于需要它的元素。

即使您是手写 CSS，谨慎应用该规则也可以防止未来 3D CSS 动画或附加到您网站的其他花哨内容可能产生的任何意外后果.与其用弯刀不如用手术刀，在这里。

在 * 元素上使用背面可见性

Using backface-visibility on * elements

css

performance

webkit