Pourquoi les animations CSS scintillent-elles sur iPhone WebKit et comment puis-je y remédier ?

Les animations CSS sur iPhone WebKit provoquent un scintillement

Dans l'URL fournie, les utilisateurs rencontrent un problème de scintillement lors de l'utilisation d'animations CSS sur la page Web. Le développeur Web indique qu'il utilise les animations WebKit suivantes :

• '-webkit-transition' : 'aucune'
• '-webkit-transition' : 'toutes les 0,2 s facilitent- out'
• '-webkit-transform': 'traduire(XXpx, XXpx)'

Cependant, ces animations entraînent un scintillement lorsque les éléments se mettent en place après le défilement. De plus, lorsque vous cliquez sur le bouton « Rejouer », l'arrière-plan des accessoires et des sacs à main devient blanc pendant que les armes à feu s'animent.

Solution :

Pour résoudre le problème de scintillement, le développeur Web a ajouté le CSS suivant propriétés :

• -webkit-backface-visiblity
• -webkit-perspective : 1000

Ces propriétés ont permis d'éliminer le scintillement.

Le '-webkit-backface-visibility: caché;' La propriété empêche le rendu des faces arrière des éléments, ce qui peut provoquer un scintillement lors des animations. La « -webkit-perspective : 1000 ; » La propriété ajoute une perspective aux éléments, créant l'illusion de profondeur et réduisant l'effet de scintillement.

En incorporant ces propriétés CSS, le scintillement associé aux animations CSS est considérablement réduit, ce qui se traduit par une expérience utilisateur plus fluide.

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!