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);