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

Question

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

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

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

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

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

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

我发现this post 似乎与闪烁和backface-visiblity hidden 的使用及其相应的性能问题有关，但目前还没有解决方案。

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

Answer 1

我想你添加了这段代码

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

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

这是参考article。

Answer 2

问题与页面上这些特定元素的呈现有关。这些文本所在的父元素应该是偶数大（相同的偶数）。

只需确保总高度保持均匀，并相应地调整边距和内边距。