Empêcher le scintillement sur la transition webkit de webkit-transform

Question

Duplicata possible :
iphone webkit css animations cause flicker

Pour une raison quelconque, juste avant que mon animation de la propriété webkit-transform se produise, il y a un léger scintillement. Voici ce que je fais :

CSS :

#element {
    -webkit-transition: -webkit-transform 500ms;
}

JavaScript :

$("#element").css("-webkit-transform", "translateX(" + value + "px)");

Juste avant que la transition ait lieu, il y a un scintillement. Avez-vous une idée de la raison de ce phénomène et de la façon dont je peux résoudre le problème ?

Merci !

Mise à jour : cela ne se produit que dans Safari. Il ne se produit pas dans Chrome, bien que l'animation fonctionne.

Answer 1

La solution est mentionnée ici : http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker .

Pour votre élément, vous devez définir

-webkit-backface-visibility: hidden;

Answer 2

La règle :

-webkit-backface-visibility: hidden;

ne fonctionnera pas pour les sprites ou les fonds d'image.

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

bousille les arrière-plans qui sont en mosaïque.

Je préfère créer une classe appelée no-flick et faire cela :

.no-flick{-webkit-transform:translate3d(0,0,0);}

Answer 3

Ajoutez cette propriété css à l'élément en cours de clignotement :

-webkit-transform-style: preserve-3d;

(Et un grand merci à Nathan Hoad : http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit )

Answer 4

J'ai dû utiliser :

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

sur l'élément, sinon j'obtiendrais toujours un flickr la première fois qu'une transition se produit après le chargement de la page.

Answer 5

J'ai trouvé que l'application de la -webkit-backface-visibility: hidden; à l'élément de translation et -webkit-transform: translate3d(0,0,0); à tous ses enfants, le scintillement disparaît alors