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

<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 {

  width: 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

秒客网

CSS Animation triggers text rendering change in Safari

相关文章