CSS Animation triggers text rendering change in Safari

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

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

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

通过现象可以观察到文字闪烁基本和动画有关，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

<div class="box">
  <p>CSS Animation triggers text rendering change in Safari</p>
</div>

<div class="animation"></div>

<div class="box">
  <p>CSS Animation triggers text rendering change in Safari</p>
</div>

css

<style scoped="scoped">
.animation {
   100px;
  height: 100px;
  background-color: gray;
  -webkit-transition:all 0.35s ease-in-out;
}

.animation:hover {
  -webkit-transform: rotate(360deg);
}

.box, .box > p {
  font-size: 20px;
  position: relative;
}
</style>

上面的例子中，当鼠标滑动到 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

---

相关问题的回答

• How to prevent Webkit text rendering change during CSS
  transition
• Prevent flicker on webkit-transition of webkit-transform
• CSS Animation triggers text rendering change in Safari & Chrome (Webkit)
• Safari bug: text suddenly appears bold after css animation completes (antialiasing change)

相关问题的延伸阅读

• A Closer Look At Font Rendering
• 认识字体渲染