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