css3 transform 平移,css3-transform做平移时作用在奇数的宽高度DOM上模糊问题

概述

之前没仔细看过，反正就是经常遇到加上transform平移之后文字和其它对象就会变模糊的问题，后来发现，只有奇数的时候才会出现，偶数不会。

20170401更新

测试浏览器：Chrome50.0

可正当我准备单独写一个测试案例的时候却发现怎么都无法复现前面碰到的模糊问题：新写的测试页面无论是奇数还是偶数都不会模糊，但是项目页面还是存在，且即使我把测试页面的代码copy到项目页面里面去也还是会模糊，截图如下：

单独写的测试页面，无论如何调整高度都不会模糊：

在项目的页面上增加一模一样的代码，当高度为奇数时会模糊：

然后我就纳闷了，难道是项目的页面DOM节点太多了导致的？然后我删了其它无关节点，果然，问题不存在了：

从上面的对比图看好像还不是很明显，还能接受，但是看实际项目里面的弹出框，那字体模糊的我都怀疑人生了：

最后，关于模糊的原因，目前只能推测是：

DOM节点较多、宽高度为奇数、使用了translateX(-50%)或者 translateY(-50%)，符合这几种情况会出现字体模糊的问题。

下面是之前写的单独的测试页面，上面也说了，这个测试页面是没有复现模糊问题的。

#gray {

position: absolute;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.67);

top: 0;

left: 0;

}

.modal {

width: 506px;

height: 311px;

border: solid 1px #ccc;

position: absolute;

top: 50%;

left: 50%;

transform: translateX(-50%) translateY(-50%);

font-family: 微软雅黑;

font-size: 20px;

background: #fff;

padding: 20px;

}

.panel {

width: 400px;

height: 120px;

border: solid 1px #ccc;

padding: 10px;

}

CSS3 transform模糊示例

文字不会模糊，border会模糊

文字不会模糊，border会模糊

文字不会模糊，border会模糊

20170405更新

刚又仔细测试了一遍，发现把页面其它DOM删除都还是会模糊，唯独把echarts生成的canvas删掉之后模糊问题就不存在了，原来是canvas影响的！当然，我又自己写了个简单的canvas测试，发现没有问题，说明是因为canvas里面的内容太复杂才会出现这种问题。

终极结论

20170526更新如下：

今天又发现了新的现象，最终总结如下：

transform: translate(-50%, -50%)作用在奇数高度的DOM上，div、input等元素的border会出现模糊问题，如果使用了box-shadow模糊问题更严重，但文字不会模糊；

在满足第一种情况的前提下，如果页面还添加了很复杂的canvas(如echarts)，那么文字也会出现模糊问题；

第一种情况效果图：