ホームページ > 記事 > ウェブフロントエンド > Translate3d アニメーションの後、Webkit ベースのテキストがぼやけるのはなぜですか?
Translate3d によるアニメーション後の Webkit ベースのテキストの歪み: 永続的な問題
Webkit を使用して要素をアニメーション化した後、テキストがぼやけたり歪んだりする問題ベースのブラウザは、長期間にわたって開発者を悩ませてきました。この問題は、Safari や iPhone のデフォルトのブラウザなどのブラウザに影響します。
Background:
JavaScript ベースのスライダーは、スムーズなアニメーションのために -webkit-transform: translation3d プロパティをよく利用します。ただし、この手法を使用すると、アニメーション要素内のテキストが不注意でぼやけてしまいます。
解決時の失敗:
この問題を解決するために、次のようなさまざまな回避策が試みられています。
ただし、これらの対策は効果がないことが判明しています。
解決策:
さまざまなオプションを検討したにもかかわらず、テキストのぼやけを一貫して除去できる唯一のソリューションこれは、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 サイトの他の関連記事を参照してください。