Css translate3d 文字模糊的bug，解决之道

阅读更多

问题原因：

css transform translate3d导致字体模糊，目前已知bug，chrome暂未解决

当元素进入GPU中渲染时，在Chrome35+中的字体为grayscale渲染，IE11和FF30保持sub-pixel渲染不变。若transform值函数(如translate3d(), scale(), rotate()等)中的参数为非整数，会导致字体模糊。

 

例如：transform: translate3d(82.5px, 0px, 0px);

由于translate3d的x的值为非整数导致文字不清晰，见图：

 

目前变相解决方案：

transform: translate3d(82px, 0px, 0px);

所有参数使用正整数可解决，如图

 

更多实例应用扫码体验：

• 
• 大小: 56.4 KB

• 
• 大小: 61.9 KB

• 查看图片附件