iPhone で CSS アニメーションがちらつくのはなぜですか?どうすれば修正できますか?

iPhone WebKit CSS アニメーションのちらつきの問題について

iPhone ユーザーは、CSS アニメーションを利用する Web サイトを表示するとき、特に WebKit を使用するときにちらつきの問題が発生することがあります。ブラウザ。これは、提供されているサンプル Web サイトで確認できます。スクロールすると銃のオブジェクトがちらつきます。

基礎となる WebKit プロパティの調査:

開発者は 3 つの WebKit 固有の CSS を利用しました。プロパティ:

• '-webkit-transition': アニメーションを制御しますトランジション
• '-webkit-transform': オブジェクトの位置を操作します
• '-webkit-backface-visibility': 要素の「背面」を非表示にします

ちらつきへの対処:

ちらつきこれは 2 つの主な要因に起因すると考えられます:

• Hidden Back Faces: '-webkit-backface-visibility' プロパティは当初、オブジェクトの「背面」の面を非表示にすることでアニメーションを妨げていました。 。これにより、オブジェクトが突然明らかになり、ちらつきが知覚されるようになりました。
• パース レンダリング: 値 1000 の '-webkit-perspective' を追加すると、この問題が軽減されました。このプロパティは、3 次元のレンダリング効果をシミュレートし、点滅するオブジェクトの可視性を効果的に低下させます。

白い背景の問題の解決:

さらに、ユーザーは、特定のボタンをクリックすると白い背景が表示されることに気づきました。これは、オーバーレイ要素または背景レイヤーのアニメーションが原因である可能性があります。これに対処するには、開発者はアニメーションのタイミングや問題のある要素の可視性を調整する必要があります。

結論:

「-webkit-backface-visibility」と「-webkit-backface-visibility」の両方を追加することで、 CSS の「-webkit-perspective」プロパティにより、ちらつきと背景の問題が効果的に解決されました。このソリューションは、iOS デバイス用の Web サイトを作成する際に、WebKit レンダリングの微妙な違いを理解することの重要性を示しています。

以上がiPhone で CSS アニメーションがちらつくのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。