為什麼使用CSS縮放和translate3d時WebKit文字會模糊？

使用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">
<pre class="brush:php;toolbar:false">.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
  filter: scale(0.8);
}

雖然此方法有效減少模糊，但它可能仍會出現一些抗鋸齒問題。為了緩解這種情況，可以添加文字陰影來增強文字的外觀。