bootstrap模態窗字體模糊

 

大家可以看下，上面這幅圖裏面的文字是不是不太清楚呢，如果是真機的話，大家應該能更加清晰的看出來，確實有點模糊。如果看不出來，咱們對比另一張圖

 

 下面的這副圖看起來就清楚很多了。究其原因，是因爲這個彈窗上面，我們用到了一個transform屬性，而且我們是設置的百分數， 裏面的文字解析可能造成不是正好的PX整數，造成了文字顯示不清楚。最簡單的辦法就是給顯示不清楚的，transform改成px單位，但是這樣的話，顯然是不行的。所以就有了以下的辦法

1 #addRoleInfoModal.modal.in .modal-dialog {
2     -webkit-transform: translate(0, calc(-50% + 0.5px));
3     -ms-transform: translate(0, calc(-50% + 0.5px));
4     transform: translate(0, calc(-50% + 0.5px));
5 }

通過計算屬性，給百分數添加一個0.5px，湊成整數。

然後我查了以下具體的原因：

當元素進入GPU中渲染時，在Chrome35+中的字體爲grayscale渲染，IE11和FF30保持sub-pixel渲染不變。若transform值函數(如translate3d(), scale(), rotate()等)中的參數爲非整數，會導致字體模糊。

所以這裏記錄以下，給自己提個醒，如果裏面的文字內容比較多，需要設置一下