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??

77
demandé sur tanguy_k 2010-06-01 05:00:24

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;
124
répondu Wes Baker 2010-08-11 18:49:44

essayez ceci, et si tout va bien cela aidera:

#game {
  -webkit-backface-visibility: hidden;
}
39
répondu donohoe 2010-07-28 01:42:26
body {-webkit-transform:translate3d(0,0,0);}
17
répondu Brian D'Astous 2010-10-14 14:33:23

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.

12
répondu Johan De Silva 2012-07-02 11:21:06

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);
11
répondu fresskoma 2017-05-23 12:10:48

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.

5
répondu Rob Barreca 2017-05-23 12:34:47
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.

3
répondu Jesse 2013-04-08 23:05:08

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é.

3
répondu KendallB 2014-07-08 01:53:12

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é.

1
répondu Morpheus 2015-11-17 14:05:14

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"); }
0
répondu mattwad 2013-09-07 18:05:58

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

0
répondu Baked Inhalf 2014-04-03 13:48:37

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>

0
répondu kenorvick 2014-06-16 18:24:38

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.

0
répondu Sylvestre Lucia 2015-09-02 08:54:17

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:

http://tobiasahlin.com/blog/how-to-animate-box-shadow /

0
répondu d1ch0t0my 2016-06-07 12:11:29

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

0
répondu Mohsen.Khakbiz 2016-07-28 12:12:30

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.

0
répondu bob 2017-06-24 00:31:44

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);
0
répondu Jusid 2018-01-16 12:52:35