Question

我在一个网站上做了一些工作，这个网站有一个固定的sidenav，随页面滚动。

现在我注意到webkit呈现引擎（see this）中的position: fixed元素存在一些问题并解决了这些问题 - 如帖子所示，我使用了-webkit-backface-visibility: hidden;。< / p>

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

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

* {
    backface-visibility: hidden;
}

前缀已剥离

我的网页会有任何重大的性能点击吗？
这会修复错误吗？ （webkit有时会做一些非常奇怪的事情）
这可能带来哪些其他优点/缺点？

提前致谢，如果我的问题太模糊，我会在通知中听到你的意见;）

Answer 1

这样的性能命中率很可能不会被普通用户注册，但是如果你正在追逐索引分数，那很可能会因为某些事情而伤害你。

对于您列出的场景，如果您使用的是LESS或SASS之类的预编译器，我建议您将固定规则放在mixin或继承中，如SASS中所示：

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

这样，你就可以避免使用全能的splat CSS选择器（通常是微不足道的），你可以明智地轻松地将规则应用于需要它的元素。

即使您正在编写CSS，也要小心应用该规则，以防止因未来的3D CSS动画或附加到您网站的其他花哨绒毛而导致的任何意外后果。在这里，最好使用手术刀而不是弯刀。

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

1 个答案: