为什么我有时需要使用 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 这样的字体而不是系统字体上，而且只发生在某些操作系统和浏览器上。此外，似乎有一些与悬停事件的交互导致绝对定位的元素变得可见，从而导致页面上的后续元素闪烁。

Answer 1

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

只需确保总高度保持均匀并相应地调整边距和填充即可。