html - 为什么有时需要使用 CSS 硬件加速来防止文本闪烁？

Question

这将很难问，因为尽管我尽了最大努力，但我终其一生都无法制作一个独立的例子，所以我将不得不希望有人已经熟悉这个问题。此外，这个问题似乎不会出现在系统字体上，但会出现在像 Inter 之类的字体上。

我在我的网站上使用Inter 字体。它看起来不错，但存在一个问题，有时文本呈现得比应有的更粗（有时在悬停事件期间它也会瞬间闪烁更粗）。最终我发现我可以通过将backface-visibility: hidden属性应用于受此问题影响的元素来解决此问题。

它影响的元素似乎是随机的。绝大多数网站都运行良好，但偶尔我会发现有这个问题的标签，我必须在其上添加一个backface-visibility: hidden属性来修复它。此外，并非所有浏览器和操作系统都会发生这种情况。据我所知，Mac 设备上不存在这个问题。在 Windows 上，它有时会在悬停在元素等上时出现。

好吧，那么为什么不把这个 CSS 规则应用到根文档，让它应用到每个元素呢？表现。

显然这条规则会强制某种 GPU 加速？我对细节不太清楚，但是当我在全球范围内应用它时，我网站上的 FPS下降了。但是，如果有足够的元素，它所在的少数剩余标签仍然会导致 FPS 性能问题。

所以我的问题是：是什么原因造成的，是否有性能修复？我不能简单地应用于backface-visibility: hidden每个元素，因为它会破坏我网站的性能，但即使将它应用于弹出的少数随机元素也会导致性能问题。是什么导致某些元素随机产生这种奇怪的粗体文本效果？

我发现这篇文章似乎提到了闪烁和使用backface-visiblity hidden及其相应的性能问题，但目前还没有解决方案。

编辑：在进行了额外的研究之后，似乎不仅仅是backface-visibility: hidden修复它，而是任何引发硬件加速的 CSS 属性。所以，放在transform: translateZ(0);元素上也可以修复它，但也有性能问题。仍然需要知道的是为什么这种图形闪烁发生在像 Inter 这样的字体而不是系统字体上，并且只在某些操作系统和浏览器上发生。此外，似乎有一些与悬停事件的交互会导致绝对定位的元素变得可见，从而导致页面上的后续元素闪烁。

标签： htmlcssgoogle-chromefontsrendering

Answer 1

我想你添加这个代码

-webkit-transform: translate3d(0, 0, 0);

到闪烁的元素，从而在页面加载时以 3D 呈现它们，它们不再需要切换。

这是参考文章。