Les animations CSS de WebKit pour iPhone provoquent des scintillements

Question

C'est le site de l'iphone : http://www.thevisionairegroup.com/projects/accessorizer/site/

Après avoir cliqué sur "Jouer maintenant", tu arriveras à un jeu. Les armes vont défiler. Tu peux faire défiler le sac à main et les accessoires de haut en bas. Vous pouvez voir que lorsque vous les lâchez, ils se mettent en place. Juste au moment où ils s'enclenchent, il y a un scintillement qui se produit. Les seules animations webkit que j'utilise sont :

'-webkit-transition': 'none'

'-webkit-transition': 'all 0.2s ease-out'

'-webkit-transform': 'translate(XXpx, XXpx)'

Je choisis la première ou la deuxième transition selon que je souhaite ou non l'animer, et la transformation est le seul moyen de déplacer les choses.

Le plus gros problème, c'est lorsque vous cliquez sur "Match items", puis sur "Play again". Vous verrez que lorsque les armes s'animent, l'arrière-plan des accessoires et des sacs à main devient blanc. Quelqu'un peut-il m'éclairer sur la raison de ce phénomène ?

Answer 1

J'ai ajouté -webkit-backface-visiblity et cela m'a aidé, mais j'avais toujours un scintillement initial après avoir rechargé la page. Lorsque j'ai ajouté -webkit-perspective: 1000 il n'y avait aucun scintillement.

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

Answer 2

Essayez ceci, et j'espère que ça vous aidera :

#game {
  -webkit-backface-visibility: hidden;
}

Answer 3

body {-webkit-transform:translate3d(0,0,0);}

Answer 4

La réponse réelle pour mon cas est ici. Quelqu'un était proche avec : -webkit-backface-visibility : hidden ; Mais la vraie réponse est -webkit-backface-visibility : hidden ; doit être ajouté à l'option parent div.

Answer 5

J'ai également eu un problème avec une transition CSS "vacillante". L'animation en question était un menu glissant depuis le hors-écran, et juste au moment où l'animation se terminait, le menu entier clignotait.

Il s'est avéré que ce problème était dû à une fonctionnalité réelle d'iOS, la fonction "mettre en évidence" qui, pour une raison ou une autre, s'est déclenchée après la fin de l'animation CSS (c'est-à-dire bien après le tapotement), et a mis en évidence l'ensemble du menu au lieu de l'élément qui a été tapé. J'ai "corrigé" le problème en désactivant complètement le tap-highlight, comme décrit ci-dessous. aquí :

-webkit-tap-highlight-color: rgba(0,0,0,0);