transform使用導致元素內字體出現模糊的坑~~~

項目中遇到的，關於居中彈出層的字體模糊問題。

先來個對比圖：

清晰版：     

 模糊版：

 

這個是一個不定寬高的彈出框，居中的方式如下代碼：

.layerdiv {
    position: fixed;
    top: 50%;
    left: 50%;
    background: #f5f7f9;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    -webkit-transform: translate(-50%, -65%);
    -moz-transform: translate(-50%, -65%);
    -ms-transform: translate(-50%, -65%);
    -o-transform: translate(-50%, -65%);
    transform: translate(-50%, -51%);
    z-index: 1000;
}

使用了固定定位 和 transform: translate來居中，但是由於居中的時候顯示的彈框視覺效果上會有點偏下，所以調整了Y軸上的移動數字，-65%，也就是因為這個65導致了上面對比圖的情況；

根據百度找的的一些資料：

http://www.missyuan.net/school/web_2014/web_15791.html

http://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/comment-page-1/#comment-345084　

Transform 3D

當元素進入GPU中渲染時，在Chrome35+中的字體為grayscale渲染，IE11和FF30保持sub-pixel渲染不變。若transform值函數(如translate3d(), scale(), rotate()等)中的參數為非整數，會導致字體模糊。在使用iScroll模擬滾動的項目中會出現字體模糊。以下是對該問題的一個還原：

-webkit-transform: translate3d(1.5px, 1.5px,0);

 

-webkit-transform: translate3d(1px, 1px,0);

 

Chrome 36中使用transform不需要-webkit-前綴了!

為了防止以上模糊情況的出現，可以通過JS中的Math.round()/Math.ceil()/Math.floor()等函數使其為整數。

當加入perspective()值時，Firefox30渲染又有所不同。

transform: perspective(1px) translate3d(1.5px, 1.5px,0);在FF30中作用的元素為grayscale渲染。

 

transform: perspective(1px) translate3d(1px, 1px,0); 在FF30中作用的元素為sub-pixel渲染

 

E11均為sub-pixel渲染。

此情況下運用opacity

但是有點搞不明白的是 translate（x,y）也會出現這種情況，確實是在translate的數值是整數，或者很接近整數的時候，字體就是清晰的情況

 

總結：

　　當使用translate進行位移的時候，如果選擇的值是不接近整數的小數（測試時，整數和接近整數的小數比如：1.89、1.9+的數不會出現模糊的情況），位移的元素字體和背景等都會出現模糊的情況；目前發現的原因是這個，如有其他請在評論中提出，有新發現會持續更新。

另：http://www.kubiji.cn/topic-id2286.html  中提到將滾動條隱藏有奇效，不過沒有試出來，大家可以試試看；