WebKit ブラウザで Translate3d と Scale3d を使用するとテキストがぼやけるのはなぜですか?

ぼやけたテキストの難問: WebKit での CSS スケーリングと Translate3d

Chrome を含む WebKit ブラウザでは、CSS スケール内のテキストという特有の問題が発生します。 translation3d を同時に適用すると、コンテンツが著しくぼやけてしまいます。この動作は、提供されている JS Fiddle の例で明らかです。

JS Fiddle の例:

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
}

.testInner
{
  -webkit-transform: scale3d(1.2, 1.2, 1);
  text-align: center;
}

<div class="test">
  <div class="testInner">
    This text becomes blurry in WebKit browsers when translate3d and scale3d are applied.
  </div>
</div>

トラブルシューティング:

この問題を軽減するには、次のことをお勧めします。

• テキスト サイズを大きくする: テキストのフォント サイズを大きくして、拡大縮小や変換によって生じるぼやけを補正します。
• 要素の縮小: 拡大されたテキストに合わせて、含まれる要素のサイズを縮小します。これにより、基本的にテキストの高解像度テクスチャが作成され、明瞭さが向上します。

例:

/* Increase text size */
.testInner {
  font-size: 1.5em;
}

/* Downscale element */
.test {
  -webkit-transform: translate3d(0px, 100px, 0px) scale(0.8);
}

注:

この回避策はぼやけの問題に対処しますが、それでもアンチエイリアスが標準以下になる可能性があります。読みやすさを高めるために、.testInner 要素内のテキストにわずかなテキストの影を追加することを検討してください。

以上がWebKit ブラウザで Translate3d と Scale3d を使用するとテキストがぼやけるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。