运行不相关的动画时，Safari 会更改字体粗细

Posted 2023-03-06

【中文标题】运行不相关的动画时，Safari 会更改字体粗细

【英文标题】：Safari changing font weights when unrelated animations are running

【发布时间】：2012-04-01 17:52:44

【问题描述】：

我在我的页面上使用 css 动画，而当动画运行时，Safari 似乎会更改页面其他地方的不相关字体粗细。知道为什么会这样吗？所有其他浏览器都可以正常工作，包括 Chrome 等 webkit 浏览器。

我在视频中详细介绍了这个错误 - http://www.screenr.com/gZN8

该网站也在这里 - http://airport-r7.appspot.com/ 但它可能会不断快速变化。

我在箭头图标上使用指南针（@transition-property，@transition-duration）。没有在闪烁的标题上应用任何过渡。在 Mac 上 - 所以它可能是硬件加速，但我仍在试图弄清楚。

【问题讨论】：

-webkit-transform CSS Properties Hose Font Rendering的可能重复

【参考方案1】：

当您触发 GPU 合成（例如，通过 CSS 动画）时，浏览器将该元素发送到 GPU，但如果其顶部/左侧属性发生更改，则该元素顶部会显示的任何内容也会发送到 GPU。这包括任何位置：出现在动画之后的相对元素。

解决方案是给动画元素 position:relative 和一个 z-index ，使其高于一切。这样您可以获得动画，但在不相关的元素上保留（高级 IMO）子像素字体渲染。

这里有问题的演示和解决方案http://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1

更新： 较新版本的 Chrome 会在 GPU 合成元素上保留亚像素抗锯齿，只要该元素没有透明度，例如，具有没有透明或半透明像素的背景。请注意，诸如边界半径之类的东西会引入半透明像素。

【讨论】：

这是一个更好的解决方案。谢谢！

发帖人，您能考虑接受这个答案吗？此解决方案没有负面影响，例如关闭字体平滑（对我们大多数人来说是大禁忌）。

太棒了。这解决了我在使用 translateX 时在 Chrome 中遇到的相同问题

哇。您是如何找到该解决方案的？刚刚花了一个小时试图了解为什么动画元素会影响其他元素。

如果您希望文本出现在您在 z-index 堆栈中设置动画的元素上方，则此解决方案将不起作用。在这种情况下，添加 -webkit-font-smoothing: antialiased 如下所述似乎可以解决问题。

【参考方案2】：

显然，这就是您为硬件加速付出的代价：所有文本都会瞬间变成图像，这会导致渲染质量下降。

但是，应用html -webkit-font-smoothing: antialiased 关闭子像素抗锯齿可以解决此问题。这就是我现在正在做的事情。

更新：从那时起，我也了解到只有当浏览器无法确定动画部分是否会影响文本时才会发生这种情况。这通常可以通过使上面的文本（高于z-index）动画元素和/或确保文本具有完全不透明的背景来处理。

【讨论】：

效果很好，我们使用的字体在整个网站上看起来仍然很棒。

谢谢，当我在 Safari（仅限）下将背景颜色从透明更改为蓝色时，我的字体变得更粗了。

这对我有用，但它不尊重我的 typekit 字体的字体粗细。 z-index 效果很好！

谢谢你！我正在为其他事物后面的绝对定位元素设置动画，所以我无法更改 z-index 而不让它与它上面的事物重叠。这个解决方案解决了我的问题，没有任何回归。

【参考方案3】：

我已经多次遇到这个问题，并且成功地将以下 css 添加到动画元素中：

z-index: 60000;
position: relative;

似乎它需要 z-index 和 位置才能有效。在我的例子中，我将它与 Font Awesome 动画微调器一起使用。

【讨论】：

这会起作用，因为 CSS 会将受影响的元素提升到它自己的层中。由于 z-index 如此之高，GPU 确信它不会影响页面上的其他元素并加速它而没有任何副作用。

@mrkhyns 之所以需要position: relative，是因为z-index 不适用于statically 定位的元素。