CSS の拡大縮小と Translation3d を使用すると、WebKit のテキストがぼやけてしまうのはなぜですか?

CSS Scale と Translate3D による WebKit テキストのぼかし

開発者は、CSS を使用すると Chrome や他の 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);
}

このアプローチは効果的ですが、ぼやけは軽減されますが、アンチエイリアスの問題が依然として発生する可能性があります。これを軽減するには、テキストの影を追加してテキストの外観を向上させることができます。