css: transform導致文字顯示模糊


css: transform導致文字顯示模糊

有人認為模糊的原因是:“transform時div的寬度或者高度並不是偶數,偏移 50% 之后,像素點不是整數,和顯示像素沒有對上”。我暫時還不完全理解,我的結論如下文描述。

元素高度的影響

隨機高度 是否模糊 備注
298 No -
297 Yes -
163 Yes -
178 No -

298_偶數不模糊

297_奇數模糊

結論:當height為偶數時,transform元素不會顯示模糊

當translateY是絕對單位時不會模糊

隨機高度 是否模糊 備注
42px No -
31px No -
31px No -

-72

結論:當 translateY不為百分比,而是px時也不會顯示模糊

解決辦法

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

  • 如果元素的高度可以固定,那么其值設置為偶數即可
  • 如果元素的高度不可以固定,看看 translateY 是否可以設置為絕對單位(px)
  • 如果上面兩者都不行,可以使用 display: flex; align-items: center 來做,缺點是多了一層父元素
  • 如果第三條方法也不行,可以嘗試使用 display: table

參考文檔

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM