Les animations CSS de l'iPhone WebKit provoquent un scintillement

83

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

Après avoir cliqué sur «jouer maintenant», vous accédez à un jeu. Les pistolets défileront. Vous pouvez faire défiler le sac à main et les accessoires de haut en bas. Vous pouvez voir que lorsque vous les relâchez, ils se mettent en place. Juste au moment où ce claquement se produit, un scintillement 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 qu'elle s'anime, et la transformation est le seul moyen de déplacer les choses.

Le plus gros problème est cependant lorsque vous cliquez sur "Faire correspondre les éléments", puis sur "Rejouer". Vous verrez alors que les armes s'animent, tout l'arrière-plan des accessoires / sacs à main devient blanc. Quelqu'un peut-il s'il vous plaît me faire rayonner avec un aperçu de pourquoi cela se produit ??

iphone  css  animation  webkit  flicker 
— Jake Chapa
source

Réponses:

126

J'ai ajouté -webkit-backface-visiblityet cela a surtout aidé, mais j'avais toujours un scintillement initial après le rechargement de la page. Quand j'ai ajouté -webkit-perspective: 1000, il n'y avait aucun scintillement.

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
— Wes Baker
source
21
Quelle est la magie derrière 1000? Une autre valeur (> 0) peut-elle fonctionner?
— cYrus
REMARQUE: cela rend l'animation insensible aux événements de souris sur Windows Chrome v19: en pratique, en ajoutant cela, il n'y a pas de scintillement, mais l'animation ne démarre pas toujours (au
— survol de la
1
REMARQUE: l'ajout de visibilité sur la face arrière modifiera le rendu de vos couleurs. Voici un exemple avec la visibilité de la face
— arrière activée
3
J'ai eu ce problème avec le scintillement du texte lors de la tentative de transition d'éléments de lien. La modification de la visibilité de la face arrière a modifié l'anti-aliasing, rendant la police vraiment fine. Corrigé en utilisant -webkit-font-smoothing: subpixel-anti-crénelé;
— Dan
1
@cYrus Je suppose que nous ne saurons jamais
— Denny
39

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

#game {
  -webkit-backface-visibility: hidden;
}
— donohoe
source
2
Cela fonctionne très bien dans Safari par défaut mais échoue en mode autonome. Avez-vous des idées?
— cYrus
18 
body {-webkit-transform:translate3d(0,0,0);}
— Brian D'Astous
source
Cela l'a fait pour moi ... mais je devais l'appliquer sur un #wrapperélément car l'appliquer sur le corps bousillerait la mise en page.
— adamJLev
Si quelqu'un veut voir la face arrière "-webkit-backface-visibilité: hidden;" ne fonctionne pas, mais celui-ci est parfait. Merci!
— Nachtgold
parfait. -webkit-backface-visibility: hidden;rend les transformations d'échelle floues. body {-webkit-transform:translate3d(0,0,0);}travaillé un régal.
— Liam
J'essaye mais ça ne marche pas pour moi. Voici un extrait de code: codeply.com/go/g7Zp98paz5
— Fran_gg7
1
Cela a fonctionné pour moi. Dans mon cas, a scale(1)provoqué le scintillement. merci beaucoup
— jansesun
12

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

— Johan De Silva
source
J'avais en fait besoin d'ajouter -webkit-backface-visibility: hidden;au div parent, le div animé ET les enfants du div animé. Une fois que j'ai fait cela, cela a fonctionné parfaitement.
— mattstuehler
2
Je pense que cela a également corrigé mon scintillement en l'ajoutant au parent. Que fait-il réellement?
— chovy
L'ajouter au parent annule la position "fixe" sur les éléments enfants :(
— James
11

J'ai également eu un problème avec une transition CSS "scintillante". L'animation en question était un menu glissant hors de l'écran, et juste à la fin de l'animation, le menu entier clignotait / scintillait.

Il s'est avéré que cela était dû à une fonctionnalité iOS réelle, le "tap surbrillance" , qui, pour une raison quelconque , s'est déclenché après la fin de l'animation CSS (c'est-à-dire bien après le tap réel), et a mis en évidence tout le menu au lieu de seulement l'élément qui a été exploité. J'ai "résolu" le problème en désactivant entièrement la mise en surbrillance des touches, comme décrit ici :

-webkit-tap-highlight-color: rgba(0,0,0,0);
— Fresskoma
source
5

La réponse de Michael a -webkit-backface-visibility: hidden; fonctionné lorsque nous avons rencontré ce problème. Nous avions translateZ(0px)sur notre <body>balise pour éviter un IFRAMEbug de limite iOS 3.1.3 et antérieur et cela faisait scintiller les animations. L'ajout -webkit-backface-visibility: hidden;à chaque élément que nous avons animé a corrigé le scintillement! Sauveur de vie.

— Rob Barreca
source
3 
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

J'ai remarqué que lorsque j'avais un état de survol sur un div, la page scintillait, même si je n'avais pas de css ou de js attaché. peut-être que cela aide quelqu'un d'autre.

— Jesse
source
pour moi, celui-là a fait l'affaire. les autres n'étaient pertinents que lorsque les transitions étaient en place.
— Nadav
3

Si quelqu'un trouve que la visibilité de la face arrière ne fonctionne pas, vous pouvez consulter les propriétés déjà présentes sur votre élément animé. Pour nous, nous avons constaté que overflow-y: scrollsur un élément absoluteou fixedpositionné, cela provoquait un scintillement majeur sur iOS.

Retirer simplement le overflow-y: scrollcorrigé.

— KendallB
source
Le retrait a overflow-y: scrollaidé mon cas. Merci beaucoup!
— YemSalat
C'est probablement mon cas aussi. mais je ne peux pas supprimer le overflow-y ni la position absolue pour cet élément. une idée?
— Kobi Cohen
1

Même si j'avais -webkit-transform-style: preserve-3d;et-webkit-backface-visibility: hidden le scintillement se produisait toujours.

Dans mon cas, la cause était la z-index. L'augmenter sur l'élément actif a aidé.

— Morphée
source
0

Voici une nouvelle solution. Je définissais l'image d'arrière-plan avec jQuery et aucune des astuces de rendu 3D n'a fonctionné. J'ai donc essayé d'utiliser des classes pour définir les propriétés à la place. Voilà! Onctueux comme du beurre.

Cela provoque un scintillement:

$('#banner').css('backgroundImage', 'url("slide_1.jpg")';

Faites plutôt:

$('#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"); }
— Mattwad
source
0

J'avais passé beaucoup de temps à essayer de résoudre ce problème pour Ember Animated Outlets, Phonegap et iOS configuration .

Bien que simple, j'ai dû ajouter un arrière-plan à chaque élément parent de niveau supérieur inclus dans les animations css. En d'autres termes, assurez-vous qu'à aucun moment de vos vues il n'y a un élément qui n'a pas d'arrière-plan.

Ma configuration était la suivante pour chaque modèle et les trois éléments avaient une couleur d'arrière-plan qui leur était attribuée:

<header></header> <body class="content"></body> <footer></footer>

— Kenorvick
source
0

Au lieu d'appliquer la transition à «tous», spécifiez simplement celle dont vous avez vraiment besoin. Cela a supprimé le scintillement de mon étui.

— Sylvestre Lucia
source
0

J'ai essayé tout ce qui précède et j'ai encore des problèmes de scintillement majeurs sur Firefox et Chrome. Je l'ai corrigé, ou du moins considérablement réduit à un problème acceptable en supprimant la transformation boîte-ombre qui causait de nombreux repeints pendant l'animation. J'ai suivi et modifié pour mes besoins:

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

— d1ch0t0my
source
0

pour moi, problème de scintillement en safari résolu en supprimant 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

— Mohsen.Khakbiz
source
0

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 scintillement est causé par le basculement du navigateur entre le rendu matériel et logiciel. Et je pense que les fabricants de navigateurs sont conscients que oui, "translate3d (0,0,0)", pour forcer le rendu matériel, ils ignorent peut-être maintenant ces fausses valeurs.

=> L'utilisation d'une valeur réelle peut faire "coller" les choses.

Quoi qu'il en soit, a travaillé pour moi.

— bob
source
0

J'ai rencontré un scintillement lors de l'exécution d'une transition de diapositive lors de l'utilisation d'un navigateur Web Android par défaut.

J'ai utilisé le css de transition suivant:

-webkit-transition: all 2s;
-webkit-transform: translate(100%,0);

Aucune des solutions de contournement mentionnées dans ce fil n'a aidé à résoudre le problème. Enfin j'ai trouvé la solution. La source du scintillement est le mot-clé all qui signifie effectuer toutes les transitions possibles. Je l'ai changé pour n'effectuer que la transformation et le problème a été résolu:

-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,0);
— Jusid
source
0

Ce qui a résolu le problème pour moi, c'est de retarder l'attribution de la règle CSS transform-translate. Quelque chose comme ça:

HTML:

<div class="animate-this loading"></div>

CSS:

.animate-this {
  &:not(.loading) {
    transform: -webkit-translate(50px);
    transform: translate(50px);
    transition: -webkit-transform 0.3s, transform 0.3s;
  }
}

JavaScript (jQuery):

$(document).ready(function(){
  window.setTimeout(function(){
    $('.animate-this').removeClass('loading');
  }, 250);
});

… Parce -webkit-backface-visibility: hidden;que je n'ai rien fait pour moi.

— WoodrowShigeru
source
0

J'ai donc trouvé un correctif pour ce problème où aucun autre ne fonctionnait correctement.

CSS:

.ios-animation-fixer {
  position: fixed;
  width: 100%;
  height: 10px;
  top: -10px;
  background-color: green;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}

HTML:

<div class="ios-animation-fixer"></div>

Ensuite, définissez le z-indexpour votre élément animé sur> 1. Cela incite en quelque sorte les appareils iOS à rendre l'animation différemment et évite le scintillement dans mon scénario. L'ajustement des valeurs d'index z peut être utile si cette solution ne fonctionne pas hors de la porte.

— Colin
source
0

MISE À JOUR 2019

Vous pouvez activer le scintillement en ajoutant simplement ces règles à votre élément sur lequel la transition est utilisée.

-webkit-transform: translate3d(0, 0, 0);

A travaillé pour moi sur Safarai

— Freestyle09
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.