關於transform屬性導致字體模糊的問題


最近寫項目時也碰到了字體會模糊的情況,先簡單描述一下問題

一個寬度固定但是高度auto的彈窗讓他在屏幕當中展示(不能使用flex屬性),

position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

用了以上代碼讓彈窗居中,后來發現有的情況會使文字顯示的很模糊,感官很不舒服,

開始發現注釋掉全局的padding :0;能解決這個問題。后來發現padding不是這個問題的根源。

經過各種各樣的嘗試發現在元素高度為基數或小數時會出現這種情況,使得50%無法得到一個整數。

那解決這個問題就可以用已經幾種方式解決

1.把彈框的寬高都設為整數,此案例不適用,因為高度要自適應

2.可以改變居中的方式

3.調節translate的值使視圖能清晰

4.最后這種方法是偶然發現的,將fixed的定位方式換成absolute也可以解決


免責聲明!

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



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