Question

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

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

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

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

Answer 1

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

解决方案是给动画元素定位：relative和一个z-index，将其置于其他所有位置之上。通过这种方式，您可以获得动画，但将（优质IMO）子像素字体渲染保留在不相关的元素上。

的演示

更新：只要元素没有透明度，较新版本的Chrome就会在GPU合成元素上保留子像素抗锯齿，例如，背景没有透明或半透明像素。请注意，border-radius之类的东西会引入半透明像素。

Answer 2

显然，这是你为硬件加速付出的代价：所有文字暂时变成图像，这会导致渲染质量下降。

然而，应用html {-webkit-font-smoothing: antialiased}来关闭子像素消除锯齿会使这个问题消失。这就是我现在正在做的事情。

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

Answer 3

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

z-index: 60000;
position: relative;

似乎需要z-index 和这两个位置才有效。在我的情况下，我使用Font Awesome动画微调器。