Les animations CSS de l'iPhone WebKit provoquent un scintillement

Question 1

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

Question 2

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;

Question 3

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

#game {
  -webkit-backface-visibility: hidden;
}

Question 4

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

Question 5

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 .

Question 6

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);

Question 7

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.

Question 8

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.

Question 9

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

Question 10

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

Question 11

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"); }

Question 12

Essayez cette solution . Cela fonctionne pour moi dans Phonegap + jQM 1.4.0 :

Change ça <meta name="viewport" content="width=device-width, initial-scale=1">

À ceci à la place:

<meta name="viewport" content="width=device-width, user-scalable=no" />

En savoir plus ici: http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in

Question 13

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>

Question 14

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

Question 15

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/

Question 16

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

Question 17

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.

Question 18

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);

Question 19

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.

Question 20

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.

Question 21

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

Answer 1

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

Answer 2

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

Answer 3

21

Quelle est la magie derrière 1000? Une autre valeur (> 0) peut-elle fonctionner?

cYrus

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

1

@cYrus Je suppose que nous ne saurons jamais

Denny

Answer 8

39

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

#game {
  -webkit-backface-visibility: hidden;
}

donohoe
la source

2

Cela fonctionne très bien dans Safari par défaut mais échoue en mode autonome. Avez-vous des idées?

cYrus

Answer 9

2

Cela fonctionne très bien dans Safari par défaut mais échoue en mode autonome. Avez-vous des idées?

cYrus

Answer 10

18

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

Brian D'Astous
la 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

Answer 11

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

Answer 12

Si quelqu'un veut voir la face arrière "-webkit-backface-visibilité: hidden;" ne fonctionne pas, mais celui-ci est parfait. Merci!

Nachtgold

Answer 13

parfait. -webkit-backface-visibility: hidden;rend les transformations d'échelle floues. body {-webkit-transform:translate3d(0,0,0);}travaillé un régal.

Liam

Answer 14

J'essaye mais ça ne marche pas pour moi. Voici un extrait de code: codeply.com/go/g7Zp98paz5

Fran_gg7

Answer 15

1

Cela a fonctionné pour moi. Dans mon cas, a scale(1)provoqué le scintillement. merci beaucoup

jansesun

Answer 16

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

Answer 17

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

Answer 18

2

Je pense que cela a également corrigé mon scintillement en l'ajoutant au parent. Que fait-il réellement?

chovy

Answer 19

L'ajouter au parent annule la position "fixe" sur les éléments enfants :(

James

Answer 20

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);

Answer 21

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.

Answer 22

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
la source

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

Nadav

Answer 23

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

Nadav

Answer 24

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

Answer 25

Le retrait a overflow-y: scrollaidé mon cas. Merci beaucoup!

YemSalat

Answer 26

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

Answer 27

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

Answer 28

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"); }

Answer 29

Essayez cette solution . Cela fonctionne pour moi dans Phonegap + jQM 1.4.0 :

Change ça <meta name="viewport" content="width=device-width, initial-scale=1">

À ceci à la place:

<meta name="viewport" content="width=device-width, user-scalable=no" />

En savoir plus ici: http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in

Answer 30

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>

Answer 31

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
la source

Answer 32

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/

Answer 33

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

Answer 34

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.

Answer 35

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);

Answer 36

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.

Answer 37

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.

Answer 38

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

Les animations CSS de l'iPhone WebKit provoquent un scintillement

Réponses: