做一个网站首页时遇到的问题。上面是画廊，下面有文字。画廊的图片通过JS控制随机进行翻转，用的transform:rotateX。为了做3D翻转效果，用了transform:translate3d(0,0,0)，也设置了perspective(400px)。CSS动画都是画廊的，与下面文字没有任何关系。然而奇怪的是，一旦翻转动画被调用，下面的文字就会闪烁，在retina屏幕下尤为明显。
推测字体的渲染方式发生改变，导致视觉上的闪烁。由于transform:translate3d(0,0,0)可以触发硬件加速，从而让浏览器在渲染动画时从CPU转向GPU，有可能会导致字体的渲染方式不一致。于是做了个显眼的demo，并截图放大如下。
可以看出，在设置了transform:translate3d(0,0,0)之后，字体的渲染发生了改变，边缘透明部分的处理不一致。于是继续深究，对比了-webkit-backface-visibility:hidden 时的效果，与transform:translate3d(0,0,0)一致。backface-visibility属性定义了元素不面向屏幕时是否可见，当旋转元素不希望看到其背面时会使用到，默认是visible。
由以上测试可得出结论：当页面中有任意元素设置了transform:translate3d(0,0,0)之后，会触发GPU硬件加速，导致页面所有字体的渲染发生改变。避免闪烁的方案两种，一是给字体设置transform:translate3d(0,0,0)，二是设置backface-visibility:hidden，这两种解决方案都会使字体按照GPU渲染样式进行显示。
本文未经许可禁止转载，如需转载关注微信公众号【工程师加一】并留言。