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.8九、1.9+的數不會出現模糊的狀況），位移的元素字體和背景等都會出現模糊的狀況；目前發現的緣由是這個，若有其餘請在評論中提出，有新發現會持續更新。

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