web-dev-qa-db-fra.com

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

Duplicate possible:
Les animations css provoquent un scintillement

Pour une raison quelconque, juste avant mon animation de la propriété webkit-transform, il se produit 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 la transition, il y a un scintillement. Vous savez pourquoi et comment je pourrais résoudre le problème?

Merci!

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

csscss-transitionscss-transforms
162
devongovett

La solution est mentionnée ici: les animations CSS de WebKit pour iPhone provoquent un scintillement .

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

-webkit-backface-visibility: hidden;
275
rpitting

La règle:

-webkit-backface-visibility: hidden;

ne fonctionnera pas pour les sprites ou les arrière-plans d'image.

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

visse les fonds carrelés.

Je préfère faire un cours appelé no-flick et faire ceci:

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

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

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

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

51
Michael Bar-Sinai

Je devais utiliser:

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

sur l'élément, ou j'aurais quand même un flickr la première fois qu'une transition s'est produite après le chargement de la page

17
Kevin H

Pour une explication plus détaillée, consultez ce post:

http://www.viget.com/inspire/webkit-transform-kill-the-flash/

Je voudrais certainement éviter de l'appliquer à l'ensemble du corps. L'essentiel est de s'assurer que tout élément spécifique que vous envisagez de transformer à l'avenir est rendu en 3D afin que les navigateurs ne soient pas obligés d'activer ou de désactiver le mode de rendu. Ajouter

-webkit-transform: translateZ(0)

(ou l'une des options déjà mentionnées) à l'élément animé y parviendra.

15
Dan Tello

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

11
Adam Carter

Déclenchement accéléré du rendu du matériel pour l'élément problématique. Je conseillerais de ne pas faire cela sur les balises *, body ou html pour améliorer les performances.

.problem{
  -webkit-transform:translate3d(0,0,0);
}
5
dontmentionthebackup

Les deux réponses ci-dessus fonctionnent pour moi avec un problème similaire.

Cependant, l'approche body {-webkit-transform} permet de rendre efficacement tous les éléments de la page en 3D. Ce n'est pas la pire des choses, mais cela modifie légèrement le rendu du texte et des autres éléments de style CSS.

Ce peut être un effet que vous voulez. Cela peut être utile si vous faites une beaucoup de transformation sur votre page. Sinon, -webkit-backface-visibilité: masquée sur l'élément que vous transformez est l'option la moins invasive.

1
Eric D. Fields