Pourquoi mon animation CSS scintille-t-elle sur les iPhones et comment puis-je y remédier ?

Comprendre le problème de scintillement des animations CSS WebKit sur iPhone

Les utilisateurs d'iPhone peuvent rencontrer des problèmes de scintillement lors de la visualisation de sites Web utilisant des animations CSS, en particulier lors de l'utilisation de WebKit. navigateurs. Cela peut être observé dans l'exemple de site Web fourni, où les objets d'armes à feu scintillent lors du défilement.

Examen des propriétés sous-jacentes du WebKit :

Le développeur a utilisé trois CSS spécifiques au WebKit. propriétés :

• '-webkit-transition' : animation des contrôles transitions
• '-webkit-transform' : Manipule les positions des objets
• '-webkit-backface-visibility' : Cache la face "arrière" d'un élément

Résoudre le scintillement :

Le scintillement peut être attribué à deux principaux facteurs :

• Faces arrières cachées : La propriété '-webkit-backface-visibility' gênait initialement l'animation en masquant les faces "arrière" des objets. Cela a entraîné une révélation soudaine des objets, provoquant le scintillement perçu.
• Rendu en perspective : L'ajout de « -webkit-perspective » avec une valeur de 1 000 a atténué ce problème. Cette propriété simule un effet de rendu tridimensionnel, ce qui réduit efficacement la visibilité des objets clignotants.

Résolution du problème de fond blanc :

De plus, le L'utilisateur a remarqué qu'un fond blanc apparaissait lorsqu'il clique sur des boutons spécifiques. Cela est probablement dû à l'animation d'un élément de superposition ou d'un calque d'arrière-plan. Pour résoudre ce problème, le développeur doit affiner le timing de l'animation ou la visibilité de l'élément incriminé.

Conclusion :

En ajoutant à la fois '-webkit-backface-visibility' et '-webkit-perspective' au CSS, les problèmes de scintillement et d'arrière-plan ont été efficacement résolus. Cette solution démontre l'importance de comprendre les nuances du rendu WebKit lors de la création de sites Web pour les appareils iOS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!