在Chrome 中解決CSS 縮放後的模糊文字
Chrome 使用者最近在應用CSS 變換:scale() 後遇到文字模糊,特別是使用以下:
0% {<pre class="brush:php;toolbar:false">opacity: 0; -webkit-transform: scale(.3);
}
50% {
opacity: 1; -webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);70% {
-webkit-transform: scale(1);100% {
}
此問題在 Chrome 中尤其存在,不包括 Safari 等其他 Webkit 瀏覽器。
解決方案:為了緩解這個問題,有兩種方法已被證明有效:
1.背面可見性:將背面可見性設定為「隱藏」可將渲染重點放在物件的正面,從而緩解問題:
backface-visibility:hidden;<p> </p>2. TranslateZ:
使用translateZ屬性強制硬體加速,有效解決模糊問題:
transform:translateZ (0);<p></p>
可選地,可以透過以下方式獲得額外的清晰度合併:
-webkit-font-smoothing:子像素抗鋸齒;<p></p>嘗試不同的組合可能會進一步增強渲染結果。
以上是為什麼在 Chrome 中進行 CSS 縮放後我的文字變得模糊,如何修復它?的詳細內容。更多資訊請關注PHP中文網其他相關文章!