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

WebKit での CSS スケーリングと Translate3D: テキストの不鮮明さの原因

Chrome を含む WebKit ブラウザでは、translate3d と組み合わせると、CSS スケーリングされたコンテンツが著しく不鮮明になるという特有の問題が発生します。財産。この問題は、コンテンツのレンダリングを妨げ、ユーザー エクスペリエンスに影響を与えます。

提供されている JavaScript Fiddle で、この問題を確認できます。 HTML コードには 2 つの

が含まれています。要素のうち、1 つはクラス「test」で、もう 1 つはクラス「testInner」でその中にネストされています。 CSS は、translate3d 変換を使用して「test」要素のスタイルを設定しますが、「testInner」要素には、scale またはscale3d 変換のいずれかが含まれます。 Chrome でこの Fiddle を表示すると、「testInner」 div 内のテキストがぼやけて見えます。

この問題の根本原因は、WebKit が 3D 変換された要素をベクターではなくテクスチャとして処理することにあります。このアプローチではハードウェア 3D アクセラレーションが可能になりますが、テキストの品質は低下します。この問題を軽減するための回避策の 1 つは、テキスト サイズを増やして要素をダウンスケールし、高解像度のテクスチャを効果的に作成することです。

更新された Fiddle で示されているように、「testInner」要素内のテキスト サイズをアップスケールできます。そして要素自体を縮小します。このアプローチによりテキストの品質が向上しますが、アンチエイリアスはまだ不完全である可能性があります。可読性をさらに高めるために、テキストの影を適用してテキストの幹を太くすることができます。

この回避策を採用することで、ぼやけの問題を回避し、translate3d と組み合わせた CSS スケールのコンテンツのより視覚的に魅力的なプレゼンテーションを実現できます。このソリューションはすべてのシナリオに適しているわけではないことに注意することが重要です。ただし、テキストの品質が最重要である場合には、貴重な代替手段となります。

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

JavaScript css chrome html webkit for while class Property this issue

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。