我在我的页面上使用 css 动画，当动画运行时，Safari 似乎会更改页面其他地方的不相关字体粗细。知道为什么会这样吗？所有其他浏览器都可以正常工作，包括 Chrome 等 webkit 浏览器。
我在这里的视频中详细介绍了这个错误 - http://www.screenr.com/gZN8
该网站也在这里 - http://airport-r7.appspot.com/但它可能会不断变化。
我在箭头图标上使用指南针（@transition-property，@transition-duration）。没有在闪烁的标题上应用任何过渡。在 Mac 上 - 所以它可能是硬件加速，但我仍在试图弄清楚。
当您触发 GPU 合成（例如，通过 CSS 动画）时，浏览器将该元素发送到 GPU，但如果其顶部/左侧属性发生更改，则该元素顶部会出现的任何内容也会发送到 GPU。这包括任何位置：出现在动画之后的相对元素。
解决方案是给动画元素 position:relative 和一个 z-index ，将其置于其他所有元素之上。这样，您可以获得动画，但在不相关的元素上保留（高级 IMO）子像素字体渲染。
这是问题和解决方案的演示http://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1
更新：新版本的 Chrome 在 GPU 合成元素上保留亚像素抗锯齿，只要元素没有透明度，例如，具有没有透明或半透明像素的背景。请注意，诸如边界半径之类的东西会引入半透明像素。
显然，这就是您为硬件加速付出的代价：所有文本都会瞬间变成图像，这会导致渲染质量下降。
但是，申请html {-webkit-font-smoothing: antialiased}关闭亚像素抗锯齿，这个问题就迎刃而解了。这就是我现在正在做的事情。
更新：从那时起，我也开始了解到只有当浏览器无法确定动画部分是否会影响文本时才会发生这种情况。这通常可以通过z-index使元素上方的文本（高于）动画和/或确保文本具有完全不透明的背景来处理。
我已经多次遇到这个问题，并且成功地将以下 css 添加到动画元素中：
z-index: 60000;
position: relative;
似乎它需要 z-index和position 才能有效。就我而言，我将它与 Font Awesome 动画微调器一起使用。