CSS Animation triggers text rendering change in Safari

薄荷新首页上周五内测，花哥反馈在 MacBook Safari 浏览器下 鼠标移动到第一个商品的时候后面几个商品的文字会加粗。这是什么鬼？？？

待我回到家打开笔记本，鼠标蹭蹭蹭的发现问题远不止如此：

Banner 以下的文字都会间歇性闪(chou)烁(feng)。
鼠标移动到某个产品图上，在该元素以后区域的文字也会闪烁，而之前的元素都没问题。

通过现象可以观察到文字闪烁基本和动画有关，Banner 轮播图用到了 transform: translate3d，产品展示图缩放效果用到了transform: scale

那么除了动画以外影响字体渲染的CSS属性还有这些：

font-style //字体样式
font-variant //字体大小写
font-weight //字体重量值
font-size //字体大小
font-family //字体型号
font-smoothing //字体平滑属性

因为目前新版用到 BootStrap3，先确认下是自己的代码引发的问题还是 BootStrap3，带着疑问去了躺 BootStrap3 官网，找到轮播图的例子：

http://v3.bootcss.com/examples/carousel/

如果你在Mac Safari 打开上面链接会发现轮播图下方的文字都会随着动画而闪烁。

接下来分析是什么原因导致了这个bug的出现，通过对比分析发现在 BootStrap3 中 container 和 row 元素都用到了 position:relative 属性，而这两个元素都是嵌套使用，那么通过最简代码来复现该问题：

html

CSS Animation triggers text rendering change in Safari

css

上面的例子中，当鼠标滑动到 animation 元素上，后面的 box 就会出现文字闪烁，而之前的元素没有问题。

触发 transform ＋transition 属性的元素原本只会影响自身的字体渲染，从动画开始到结束，分别经历 Subpixel rendering -> Grayscale rendering -> Subpixel rendering，所以会出现闪烁现象，我们一般通过对自身设置 -webkit-backface-visibility: hidden 来解决。但是在Mac Safari 下还会影响其后面嵌套两层以上CSS position取值为 relative、absolute 元素字体的渲染。

解决方案

// W3C官方已经废弃该属性
-webkit-font-smoothing: subpixel-antialiased

Kiisun

以前写的文章请斟酌

CSS Animation triggers text rendering change in Safari