Translate3d を使用すると、WebKit ベースのブラウザでテキストがぼやけてしまうのはなぜですか?

translate3d を使用したアニメーション要素における Webkit ベースの不鮮明なテキストの問題

iPhone を含む WebKit ベースのブラウザ全体で発生する一般的な問題は次のとおりです。アニメーションにtranslate3dを実装した後、テキストが歪んでぼやける。これは、アニメーション メソッドとして -webkit-transform: translation3d を使用する場合に特によく発生します。

フォーラムで提案されている潜在的な解決策の 1 つは、相対位置を削除し、-webkit-font-smoothing: antialiased ルールを追加することでした。ただし、これらの調整は効果がないことが判明することがよくあります。

Dirty Solution

エレガントまたは最適な方法ではありませんが、潜在的な回避策として、この問題を軽減するために変換値が報告されています:

top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);

この手法は、変換を分数でわずかにオフセットすることに依存しています。これにより、WebKit ブラウザのtranslate3d アニメーションに関連するぼやけ効果が防止されるようです。

その他の考慮事項:

代替アプローチとしては、次のものが挙げられます。

• 代わりに JavaScript ベースのアニメーションを利用するtranslation3d.
• 特定の実装内でテキストの歪みの根本的な原因を調査し、それに直接対処します。

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