WebKit ベースのブラウザで -webkit-transform: translation3d によりテキストがぼやけるのはなぜですか?

Translate3d を使用した WebKit ベースのブラウザでのアニメーション後のぼやけたテキスト

WebKit ベースの -webkit-transform: translation3d を使用して実装された特定のアニメーションiPhone などのブラウザでは、テキストがぼやけたり歪んだりする可能性があります。この問題はブラウザのレンダリング エンジンに起因しており、相対位置の削除や -webkit-font-smoothing: antialiased の適用などの CSS 回避策で軽減しようとしても解決しません。

JavaScript ベースのアニメーション メソッドがこの問題を解決します。 、WebKit 対応デバイスのパフォーマンスを妨げます。速度を犠牲にすることなく問題を回避するには、変換値をわずかに変更することが回避策となります。

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

この分数オフセットにより、translate3d アニメーションのパフォーマンス上の利点を維持しながら、ぼやけが効果的に除去されます。

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