WebKit Translate3d アニメーションでテキストがぼやけるのはなぜですか?

Translate3d アニメーションにおける Webkit ベースの不鮮明なテキストの問題: 永続的な謎

ユビキタスな iPhone を含む WebKit ベースのブラウザは悩まされています。これは、translate3d を使用するとテキストがぼやけたり歪んだりするという永続的な問題によって発生します。

大規模な調査にもかかわらず、この現象の正確な原因は依然として解明されていません。相対位置の削除や -webkit-font-smoothing: antialiased の実装など、さまざまな回避策は効果がないことが証明されています。

これまで確認された唯一の信頼できる解決策は、translate3d を放棄し、純粋な JavaScript ベースのアニメーションに頼ることです。ただし、これにより、WebKit 対応デバイスではパフォーマンスが大幅に低下します。

あるユーザーは、translate3d 値に小数ピクセル調整を導入することで部分的な修正を報告しました。次のコード スニペットは、このアプローチの例を示しています。

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

このソリューションはある程度の軽減を提供する可能性がありますが、根本的な問題への対処には至っておらず、すべてのシナリオに適しているわけではない可能性があります。

より堅牢なソリューションの模索が続く中、開発者はパフォーマンスとグラフィック忠実度のバランスをとり、translate3d の利点とテキスト劣化の可能性を比較検討する必要に迫られています。すべてのプラットフォームでシームレスなアニメーション テキストのレンダリングを可能にする決定的な解決策が現れることが期待されています。

以上がWebKit Translate3d アニメーションでテキストがぼやけるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。