iPhone WebKit CSS animations cause flicker
C'est le site iphone: http://www.thevisionairegroup.com/projects/accessorizer/site /
après avoir cliqué sur" play now", vous accéderez à un jeu. Les canons vont défiler. Vous pouvez faire défiler la bourse et les accessoires de haut en bas. Vous pouvez voir que quand vous laissez aller ils se mettent en place. Juste au moment où ce claquement se produit, il y a un clignotement 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 l'un ou l'autre la première ou la deuxième transition basée sur le fait que je veux ou non qu'elle s'anime, et la transformation est la seule façon de faire bouger les choses.
le plus gros problème cependant est quand vous cliquez sur" Match items", puis cliquez sur"Play again". Vous verrez que lorsque les armes s'animent, tout le fond des accessoires / sacs devient blanc. Quelqu'un peut-veuillez émettre de moi avec un aperçu asto pourquoi ce qui se passe??
17 réponses
j'ai ajouté -webkit-backface-visiblity et cela a surtout aidé, mais j'ai quand même eu un premier clignotement après avoir rechargé la page. Quand j'ai ajouté -webkit-perspective: 1000 , il n'y avait aucun clignotement.
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
essayez ceci, et si tout va bien cela aidera:
#game {
-webkit-backface-visibility: hidden;
}
la réponse à 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é à la parent div.
j'ai eu un problème avec une transition CSS" clignotante " aussi. L'animation en question était un menu glissant depuis l'écran, et juste à la fin de l'animation, le menu entier clignotait/clignotait.
comme il s'est avéré, cela a été causé par une caractéristique réelle iOS, le "tap highlight" , qui, pour une raison quelconque a donné le coup d'envoi après l'animation CSS terminé (i.e. way after the actual tap), et a mis en évidence l'ensemble du menu au lieu de seulement le l'élément qui a été mis sur écoute. J'ai "corrigé" le problème en désactivant complètement tap-highlight, comme décrit ici :
-webkit-tap-highlight-color: rgba(0,0,0,0);
Michael's answer -webkit-backface-visibility: hidden; a fonctionné quand nous avons eu ce problème. Nous avions translateZ(0px) sur notre étiquette <body> pour empêcher un bug de limite iOS 3.1.3 et plus tôt IFRAME et il a causé des anims à clignoter. Ajouter -webkit-backface-visibility: hidden; à chaque élément que nous avons animé fixe le clignotant! La vie de veille.
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
j'ai remarqué que lorsque j'avais un État de vol stationnaire sur une div, la page clignotait, même si je n'avais pas de css ou de js. peut-être que cela aide quelqu'un d'autre.
si quelqu'un découvre que backface-visibility ne fonctionne pas, vous pouvez regarder les propriétés déjà sur votre élément animé. Pour nous, nous avons constaté que overflow-y: scroll sur un élément positionné absolute ou fixed causait des scintillements majeurs sur iOS.
simplement supprimer overflow-y: scroll fixé.
même si j'avais -webkit-transform-style: preserve-3d; et -webkit-backface-visibility: hidden le clignotement se produisait toujours.
dans mon cas, la cause était la z-index . Il augmente sur l'élément actif a aidé.
Voici une nouvelle solution. Je réglais l'image de fond avec jQuery, et aucun des trucs de rendu 3d n'a fonctionné. J'ai donc essayé d'utiliser des classes pour définir les propriétés à la place. Voilà! Lisse comme du beurre.
Cela provoque le clignotement:
$('#banner').css('backgroundImage', 'url("slide_1.jpg")';
au lieu de:
$('#banner').attr('class', '.slide-1');
avec des classes définies:
#banner { -webkit-transition: background-image .25s; }
.slide-1 { background-image: url("slide_1.jpg"); }
.slide-2 { background-image: url("slide_2.jpg"); }
Essayez cette solution . Il fonctionne pour moi dans Phonegap + jQM 1.4.0 :
modifier cette <meta name="viewport" content="width=device-width, initial-scale=1">
à la place:
<meta name="viewport" content="width=device-width, user-scalable=no" />
pour en savoir plus: http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in
j'avais passé beaucoup de temps à essayer de comprendre ce numéro pour Ember Animated Outlets, Phonegap, et iOS setup.
bien que simple, j'ai dû ajouter un arrière-plan à chaque élément parent de haut niveau qui était inclus dans les animations css. En d'autres termes, assurez-vous qu'à aucun moment dans vos vues il n'y a un élément qui n'a pas d'arrière-plan.
ma configuration était celle-ci pour chaque modèle et les trois éléments avaient un couleur de fond qui leur est attribuée:
<header></header>
<body class="content"></body>
<footer></footer>
au lieu d'appliquer la transition à" tout", il suffit de spécifier celui dont vous avez vraiment besoin. Elle a enlevé le scintillement sur mon cas.
j'ai essayé tout ce qui précède et j'avais encore des problèmes majeurs de scintillement sur Firefox et Chrome. Je l'ai corrigé, ou du moins grandement réduit à un problème acceptable en enlevant la transformation boîte-ombre qui causait de nombreux repeints pendant l'animation. J'ai suivi ceci et modifié pour mes besoins:
pour moi, problème de scintillement sur safari résolu en enlevant will-change: transform; à l'élément animé.
aussi je pourrais résoudre ce problème en ajoutant overflow: hidden; au parent, mais avec cela, tous les éléments avec transform: translateZ() sont devenus inefficaces
j'ai dû utiliser une valeur réelle (plutôt que 0):
.no-flick{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform:translateZ(0.1px);
transform: translateZ(0.1px); /* needs an actual value */
}
exemple:
<div class="foo no-flick"></div>
D'après ce que j'ai lu , le clignotement est causé par le passage du navigateur entre le matériel et le rendu du logiciel. Et je pense que les fabricants de navigateur sont au courant de l'année passée "translate3d(0,0)" pour forcer le rendu matériel -- donc ils peuvent maintenant ignorer ces fausses valeurs.
= > en utilisant une valeur réelle mai cause choses à "coller".
de toute façon, ça a marché pour moi.
j'ai connu des clignotements lors de l'exécution d'une transition de glissement en utilisant un navigateur Web Android par défaut.
j'ai utilisé la transition css suivante:
-webkit-transition: all 2s;
-webkit-transform: translate(100%,0);
aucune des solutions de rechange mentionnées dans ce fil n'a aidé à résoudre le problème. Enfin j'ai trouvé la solution. La source de scintillement est le mot-clé all qui signifie effectuer toutes les transitions possibles. Je l'ai changé pour effectuer uniquement la transformation et le problème a été résolu:
-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,0);