当不相关的动画正在运行时,Safari更改字体权重

我在我的页面上使用CSS动画，当动画运行时，Safari似乎在页面上的其他位置更改不相关的字体。任何想法为什么这种情况发生？所有其他浏览器工作正常，包括像Chrome这样的webkit。

我在这里的视频详细的bug – http://www.screenr.com/gZN8

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

我在箭头图标上使用指南针(@ transition-property，@ transition-duration)。在正在闪烁的标题上未应用任何转场。在Mac上 – 所以它可能是硬件加速，但我仍然试图弄清楚。

解决方法

当您触发GPU合成时(例如，通过CSS动画)，浏览器将该元素发送到GPU，但是如果其顶部/左侧属性被改变，那么该元素将出现在该元素的顶部。这包括任何位置：在动画一个之后出现的相对元素。

解决方案是给动画元素position：relative和一个z-index，使它高于一切。这样你得到你的动画，但保持(高级IMO)子像素字体呈现在不相关的元素。

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

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