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

不少人都知道CSS中添加transform:translate3d(0,0,0)能起到一個GPU加速的效果，讓動畫更流暢。
可是這也帶來了反作用。

一、文字模糊？

下面是使用了transform:translate3d後，很明顯的出現了文字模糊，看起來很不舒服；

二、快速修復bug

先不問底層是如何形成的，咱們先來修復一下這個問題，只要我把裏面帶小數的參數改爲整數的，那麼這個問題立刻解決，下圖很清晰了

三、微軟Edge瀏覽器沒問題

四、爲何？

我猜測這是和Chrome用的渲染引擎的工做方式有關，具體爲何，有空再詳細研究吧。//TODO