css: transform致使文字显示模糊

css: transform致使文字显示模糊

有人认为模糊的缘由是：“transform时div的宽度或者高度并非偶数，偏移 50% 以后，像素点不是整数，和显示像素没有对上”。我暂时还不彻底理解，个人结论以下文描述。

元素高度的影响

随机高度	是否模糊	备注
298	No	-
297	Yes	-
163	Yes	-
178	No	-

结论：当height为偶数时，transform元素不会显示模糊

当translateY是绝对单位时不会模糊

随机高度	是否模糊	备注
42px	No	-
31px	No	-
31px	No	-

结论：当 translateY不为百分比，而是px时也不会显示模糊

解决办法

在使用 transform: translate3d(50%, 50%, 0) 时：

• 若是元素的高度能够固定，那么其值设置为偶数便可
• 若是元素的高度不能够固定，看看 translateY 是否能够设置为绝对单位(px)
• 若是上面二者都不行，能够使用 display: flex; align-items: center 来作，缺点是多了一层父元素
• 若是第三条方法也不行，能够尝试使用 display: table

参考文档

1. stackoverflow blurry-text-on-transformrotate-in-chrome