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

Translate3d によるアニメーション後の Webkit ベースのテキストの歪み: 永続的な問題

Webkit を使用して要素をアニメーション化した後、テキストがぼやけたり歪んだりする問題ベースのブラウザは、長期間にわたって開発者を悩ませてきました。この問題は、Safari や iPhone のデフォルトのブラウザなどのブラウザに影響します。

Background:

JavaScript ベースのスライダーは、スムーズなアニメーションのために -webkit-transform: translation3d プロパティをよく利用します。ただし、この手法を使用すると、アニメーション要素内のテキストが不注意でぼやけてしまいます。

解決時の失敗:

この問題を解決するために、次のようなさまざまな回避策が試みられています。

• 相対の削除位置
• -webkit-font-smoothing の追加: アンチエイリアス

ただし、これらの対策は効果がないことが判明しています。

解決策:

さまざまなオプションを検討したにもかかわらず、テキストのぼやけを一貫して除去できる唯一のソリューションこれは、translate3d を完全にバイパスして、JavaScript ベースのアニメーションに戻すことです。ただし、この妥協により、WebKit 対応デバイスのパフォーマンスが犠牲になります。

部分的な解決策:

包括的な解決策はまだ見つかっていませんが、問題を軽減する部分的な解決策が発見されました。多少の歪み:

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

この手法では、0.1% のわずかなオフセットが発生します。要素の位置と変換。ぼやけを完全に除去することはできませんが、影響は大幅に軽減されます。

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