Safari 在运行无关动画时更改字体粗细 [英] Safari changing font weights when unrelated animations are running

问题描述

我在我的页面上使用了 css 动画，而 Safari 似乎在动画运行时更改了页面上其他地方不相关的字体粗细.知道为什么会这样吗?所有其他浏览器都可以正常工作，包括像 Chrome 这样的 webkit 浏览器.

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，但也会将出现在该元素顶部的任何内容发送到 GPU如果它的顶部/左侧属性发生了变化.这包括出现在动画之后的任何 position:relative 元素.

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，使其高于一切.这样你就可以获得动画，但在不相关的元素上保留(高级 IMO)子像素字体渲染.

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屋！