当不相关的动画正在运行时，Safari更改字体权重 [英] Safari changing font weights when unrelated animations are running

问题描述

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

I'm using css animations on my page and Safari seems to change unrelated font weights elsewhere on the page when animations are running. Any idea why this happens? All other browsers work fine, include webkit ones like Chrome.

我在视频中详细描述了错误 - http ：//www.screenr.com/gZN8

I've detailed the bug in a video here - http://www.screenr.com/gZN8

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

The site is also here - http://airport-r7.appspot.com/ but it might keep changing rapidly.

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

I'm using compass (@transition-property, @transition-duration) on the arrow icons. No transitions applied on the heading that's flashing. On a Mac - so it might be the hardware acceleration, but I'm still trying to figure it out.

推荐答案

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

When you trigger GPU compositing (eg, through CSS animation), the browser sends that element to the GPU, but also anything that would appear on top of that element if its top/left properties were changed. This includes any position:relative elements that appear after the animating one.

解决方案是给动画元素position：relative和一个z-index，其他。

The solution is to give the animating element position:relative and a z-index that puts it above everything else. That way you get your animation but keep the (superior IMO) sub-pixel font rendering on unrelated elements.

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

Here's a demo of the problem and solution http://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1

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

Update: Newer versions of Chrome retain sub-pixel antialiasing on GPU composited elements as long as the element has no transparency, eg has a background with no transparent or semi-transparent pixels. Note that things like border-radius introduce semi-transparent pixels.

这篇关于当不相关的动画正在运行时，Safari更改字体权重的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！