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