Webkit ブラウザでアニメーション後に「translate3d」を使用するとテキストがぼやけるのはなぜですか?

Webkit によるアニメーション後のテキストの歪み: Translate3d の難題を解明する

iPhone の Safari を含む Webkit ベースのブラウザの普及により、アニメーションを利用した後にテキストがぼやけるという、当惑させる現象が明らかになりました。 「-webkit-transform:translate3d」この問題は数え切れないほどの開発者を悩ませ、困惑させてきました。

問題の根底にあるのは、サイトが JavaScript ベースのスライダー アニメーションに依存していることです。ただし、これらのアニメーションにtranslate3dを利用すると、特にiPhoneではテキストの明瞭度が大幅に低下します。相対位置の削除や「-webkit-font-smoothing: antialiased」の追加などの一般的な「修正」は無駄であることが証明されています。

この歪みを解消する唯一の実行可能な解決策は、translate3d を放棄して純粋な JavaScript アニメーションを採用することです。ただし、translate3d は、WebKit デバイス上で優れたパフォーマンスを実現するという魅力を提供します。未だに疑問が残ります。translate3d はなぜテキストにこれほど有害な影響を与えるのでしょうか?

決定的な答えはまだ見つかりませんが、問題を軽減する回避策が登場しています。

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

この型破りなアプローチブレが軽減されるようです。完璧な解決策ではありませんが、アニメーション後のテキストがぼやけるイライラからいくらか休息を取ることができます。

以上がWebkit ブラウザでアニメーション後に「translate3d」を使用するとテキストがぼやけるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。