CSS スケーリングと Translate3D により、WebKit ブラウザーでテキストがぼやけてしまうのはなぜですか?

CSS スケーリングと Translate3D による WebKit のぼやけたテキストの難題

Chrome やその他の WebKit ブラウザで、translate3d と一緒に CSS スケーリングを適用すると、不要なぼやけが発生しますスケーリングされたコンテンツに対する効果。この顕著な例は、提供されている JS Fiddle で見ることができます。

問題の理解

WebKit ブラウザは、基本的に、3D 変換された要素をハードウェア 3D アクセラレーションのテクスチャとして扱います。このアプローチでは、これらの要素がスケーリングとtranslate3dの両方を実行すると、不鮮明なアーティファクトが発生します。

提案された回避策

残念ながら、この特定の問題に対する直接の回避策はありません。ただし、テキストのサイズを大きくし、要素全体を縮小することで、ぼやけを軽減できます。これにより、効果的に高解像度のテクスチャが作成され、ぼかしの視認性が低下します。

提供されている Fiddle (http://jsfiddle.net/SfKKv/) では、テキスト サイズが拡大され、テキスト サイズに一致するようにオフセットされています。適用されたtranslate3dの量。さらに、アンチエイリアスをさらに改善するためにテキスト シャドウが導入されました。

注意事項

この回避策では、特にぼやけが完全に解消されるわけではないことを認識することが重要です。小さなフォントや鋭いエッジ。最終的な目標が鮮明なテキストを実現することである場合は、別のレンダリング アプローチやテクニックを検討する必要があるかもしれません。

以上がCSS スケーリングと Translate3D により、WebKit ブラウザーでテキストがぼやけてしまうのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。