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