使用CSS Scale 和Translate3D 讓WebKit 文字變得模糊
開發人員遇到這樣的問題：當CSSome 和其他WebKit 瀏覽器中呈現的文字變得過於模糊縮放（scale 或scale3d）與translate3d 變換相結合。這可以在簡化的範例中觀察到：
<div class="test">
<div class="testInner">
This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
</div>
</div>.test {
-webkit-transform: translate3d(0px, 100px, 0px);
}
.testInner {
-webkit-transform: scale3d(1.2, 1.2, 1);
text-align: center;
}解決方法：
解決此問題需要採用獨特的方法，因為WebKit 將3D 轉換元素視為紋理而不是向量。要解決模糊問題，請增加文字大小並縮小元素，從而有效地創建更高解析度的紋理。
使用此解決方法的更新範例：
<div class="test"> <div class="testInner">
.test {
-webkit-transform: translate3d(0px, 100px, 0px);
filter: scale(0.8);
}雖然此方法有效減少模糊，但它可能仍會出現一些抗鋸齒問題。為了緩解這種情況，可以添加文字陰影來增強文字的外觀。
以上是為什麼使用CSS縮放和translate3d時WebKit文字會模糊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
