web-dev-qa-db-fra.com

les animations CSS pour iPhone WebKit provoquent des scintillements

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

Après avoir cliqué sur "jouer maintenant", vous arriverez à une partie. Les armes défileront. Vous pouvez faire défiler le sac à main et les accessoires de haut en bas. Vous pouvez voir que lorsque vous les lâchez, ils se mettent en place. Au moment même où il se produit, un scintillement se produit. Les seules animations de kit Web que j'utilise sont les suivantes:

'-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 en fonction de l’animation souhaitée ou non, et la transformation est le seul moyen de déplacer les éléments.

Le plus gros problème, cependant, est lorsque vous cliquez sur "Match items", puis sur "Play again". Vous verrez que lorsque les armes s'animent, tout l'arrière-plan des accessoires/porte-monnaie devient blanc. Quelqu'un peut-il s'il vous plaît me rayonner avec un aperçu de pourquoi cela se produit?

iphonecssanimationwebkitflicker
78
Jake Chapa

J'ai ajouté -webkit-backface-visiblity et cela a surtout aidé, mais j'avais toujours un scintillement initial après avoir rechargé la page. Lorsque j'ai ajouté -webkit-perspective: 1000, il n'y avait aucun scintillement.

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
125
Wes Baker

Essayez ceci et espérons que cela vous aidera:

#game {
  -webkit-backface-visibility: hidden;
}
39
donohoe
body {-webkit-transform:translate3d(0,0,0);}
17
Brian D'Astous

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

12
Johan De Silva

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

Il s’est avéré que cela était dû à une fonctionnalité iOS réelle, le "tap tape" , qui pour une raison quelconque a été lancé après la fin de l’animation CSS (c’est-à-dire bien après le tapotement actuel), et a mis en évidence le menu entier de seulement l'élément qui a été exploité. J'ai "corrigé" le problème en désactivant entièrement Tap-Highlight, comme décrit ici :

-webkit-tap-highlight-color: rgba(0,0,0,0);
11
fresskoma

La réponse de Michael-webkit-backface-visibility: hidden; a fonctionné lorsque nous avons rencontré ce problème. Nous avions translateZ(0px) sur notre balise <body> pour empêcher un bogue limite iOS 3.1.3 et version antérieure IFRAME; L'ajout de -webkit-backface-visibility: hidden; à chaque élément que nous avons animé a corrigé le scintillement! Épargnant de vie.

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

j'ai remarqué que lorsque j'avais un état de survol sur une div, la page scintillait, même si je n'avais aucun fichier CSS ou js associé. peut-être que cela aide quelqu'un d'autre.

3
Jesse

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: scroll sur un élément positionné absolute ou fixed provoquait un scintillement important sur iOS.

Il suffit de supprimer overflow-y: scroll pour le corriger.

3
KendallB

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 le z-index. L'augmenter sur l'élément actif a aidé.

1
Morpheus

J'ai donc trouvé une solution à 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>

Puis définissez le z-index pour que votre élément animé soit> 1. Cela aide en quelque sorte les périphériques iOS à rendre l'animation différemment et évite le scintillement dans mon scénario. Ajuster les valeurs z-index peut être utile si cette solution ne fonctionne pas hors de la porte.

0
Colin

Au lieu d'appliquer la transition à "tous", indiquez simplement celle dont vous avez réellement besoin. Cela a enlevé le scintillement de mon cas.

0
Sylvestre Lucia

Voici une nouvelle solution. Je réglais 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. Voilà! Lisse comme du beurre.

Cela provoque un scintillement:

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

Au lieu de faire:

$('#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
mattwad

J'ai eu des scintillements lors d'une transition de diapositive avec 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 permis de 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
Jusid

Je devais 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 du fait que "translate3d (0,0,0)" existe déjà pour forcer le rendu du matériel. Ils peuvent donc ignorer ces fausses valeurs.

=> L'utilisation d'une valeur réelle peut provoquer un "blocage" des choses.

En tout cas, a travaillé pour moi.

0
bob

J'ai essayé tout ce qui précède et des problèmes majeurs de scintillement persistaient sous Firefox et Chrome. Je l'ai corrigé, ou du moins considérablement réduit à un problème acceptable en supprimant la transformation Box-Shadow qui provoquait de nombreux repeints pendant l'animation. J'ai suivi cela et modifié pour mes besoins:

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

0
d1ch0t0my

Pour moi, ce qui a été résolu, c’est de retarder l’attribution de la règle CSS transformation-traduction. 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 que -webkit-backface-visibility: hidden; n'a pas fait rien pour moi.

0
WoodrowShigeru

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

Changer ce <meta name="viewport" content="width=device-width, initial-scale=1">

Pour cela à 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

0
Baked Inhalf

pour moi, le problème de scintillement sur safari résolu en supprimant will-change: transform; de l'élément animé.

je pourrais aussi 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
Mohsen.Khakbiz

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

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 dans vos vues il n’existe un élément qui n’a pas d’arrière-plan.

Ma configuration était la suivante pour chaque modèle et une couleur d’arrière-plan était affectée aux trois éléments:

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

0
kenorvick