CSS3使用transform:translate3d在Chrome出现的文字模糊及解决

不少人都知道CSS中添加transform:translate3d(0,0,0)能起到一个GPU加速的效果，让动画更流畅。
可是这也带来了反作用。

一、文字模糊？

下面是使用了transform:translate3d后，很明显的出现了文字模糊，看起来很不舒服；

二、快速修复bug

先不问底层是如何形成的，咱们先来修复一下这个问题，只要我把里面带小数的参数改为整数的，那么这个问题立刻解决，下图很清晰了

三、微软Edge浏览器没问题

四、为何？

我猜测这是和Chrome用的渲染引擎的工做方式有关，具体为何，有空再详细研究吧。//TODO