Angular.js: ng-hide et ng-show s'affichent en même temps pendant une courte période dans IE11

Cela semble familier. Le problème est que je ne peux jamais les reproduire de manière fiable dans IE11. Cela m'est arrivé peut-être une fois sur 30. Je l'ai également vu une fois sur Firefox, donc cela a peut-être quelque chose à voir avec la vitesse à laquelle le navigateur a vidé la file d'attente requestAnimationFrame, ou avec le temps que nous prenons pour détecter si les animations sont autorisées.

Pouvez-vous s'il vous plaît tester avec le dernier instantané: http://code.angularjs.org/snapshot/angular-animate.js et voir si cela se produit moins souvent?

Dans mon IE11, le flash des deux s'affiche chaque fois que je clique sur la case à cocher. L'utilisation de l'animation angulaire liée n'a pas semblé changer ce comportement.

C'est bizarre. Quelle est la version d'IE et du système d'exploitation que vous possédez? Et votre ordinateur est-il généralement lent ou sous-chargé?

Nous avons des ordinateurs assez haut de gamme (j'ai essayé sur trois d'entre eux), ma première estimation était en fait qu'il était assez rapide pour montrer quelque chose qui n'est visible que pendant une courte période de temps. J'utilise Windows 8.1 avec la version 11.0.9600.18202 d'IE. L'un des ordinateurs sur lesquels j'ai essayé était Windows 7, montrant le même problème.

J'applique actuellement ce css pour éviter le problème:
.ng-hide.ng-hide-animate {
affichage: aucun! important;
}

Cela pourrait bien sûr nous poser des problèmes à l'avenir si nous voulons animer certains ng-hide et non en animer certains.

Hm, je ne pensais pas que l'ordinateur était trop rapide. Ça pourrait être ça. J'ai également une version légèrement plus récente d'IE11 (11.0.9600.18204), mais je doute que ce soit la raison.

J'ai essayé cela maintenant dans IE11 sur mon Windows 7 virtuel et je rencontre le problème peut-être une fois tous les 2 à 10 essais. Cela peut être dû au fait que ma machine virtuelle fonctionne plus lentement, mais ce n'est qu'une supposition.

J'ai le même problème dans Chrome, avec un commutateur ng. Le cas spécifique où cela se produit est lorsqu'un changement de valeur de vue dans ngModel est validé, ce qui a) supprime une classe ng-valid-parse sur le formulaire parent, b) supprime une classe sur le champ du formulaire (un empty class) et b) retourne un ng-switch (car le champ du formulaire est alors désactivé). Cela se produit parce que la tâche d'animation parent (a) s'exécute en premier et que le planificateur attend jusqu'à ce qu'elle soit terminée, puis demande une autre image pour exécuter la tâche à partir du champ de formulaire (b), puis attend une autre image pour exécuter la tâche d'animation ng-switch (c), provoquant un scintillement d'une image où les deux éléments du commutateur ng sont affichés temporairement.

@plestik pouvez-vous publier une démo dans un plnkr.co ou similaire?

@Narretz Je vais

Désolé, impossible de le reproduire dans un Plunkr.

@Narretz, puis -je faire quelque chose pour aider à résoudre ce problème? Si vous le souhaitez, je peux vous fournir des informations de connexion pour notre environnement de développement où je peux le reproduire de manière cohérente.

Edit: J'ai manqué la partie de la documentation où il est dit assez clairement que la combinaison d'animations structurelles avec des animations de classe peut entraîner un scintillement. Ne faites pas attention à moi, alors.

Je rencontre des problèmes similaires sur Chrome avec OS X. Dans mon cas, ce sont deux ng-show avec des conditions d'affichage distinctes (qui ne sont jamais vraies en même temps). Même si je bascule les deux conditions immédiatement l'une après l'autre, il y a un bref moment où les deux éléments sont visibles. Cela ne se produit pas dans toutes les configurations de page, mais se produit de manière assez cohérente dans un cas particulier.

J'ai également le même problème dans Chrome sur Windows, en utilisant angular et angular-animate 1.4.12.

La solution

Je rencontre le même problème dans le simulateur iOS pour iOS 9.3. J'ai téléchargé une vidéo démontrant le problème: https://youtu.be/C0Lh5B1Lj6k

J'ai récemment mis la main à la pâte en utilisant du matériel angulaire et inclus dans mon projet existant et j'ai commencé à ressentir ce comportement de scintillement dans Chrome en utilisant ng-if / ng-show. Après quelques pistes et erreurs, le problème causé par "ngAnimate" a été détecté.

La solution

Je viens d'ajouter ce qui suit dans mon CSS et j'ai remplacé mon "ng-if" par "ng-show"
.ng-hide.ng-hide-animate {
affichage: aucun! important;
}

PS: en utilisant Angular et ngAnimate version v1.5.7

+1

Salut, je rencontre un problème similaire avec angular 1.5.8 (je viens de passer de la v 1.12.15).

Le problème est très apparent sous IE11, il est là aussi sous Chrome mais le plus souvent la transition est trop rapide à remarquer.

La directive que j'ai est un contrôle d'onglet qui utilise la transclusion pour inclure des pages d'onglets. Le scintillement que je rencontre (qui montre brièvement la nouvelle et l'ancienne page à onglet active html côte à côte) se produit lorsque l'utilisateur bascule entre les onglets (c'est-à-dire après la compilation et le chargement du modèle). Le code utilise ng-show avec un indicateur booléen pour décider d'afficher ou non la page (dont un maximum de 1 est actif à tout moment).
Si je remplace ng-show par ng-s'il n'y a pas de scintillement.

Le travail autour que j'avais prévu d'utiliser était d'utiliser ng-class avec le même indicateur conditionnel ng-show pour activer une classe css personnalisée '.myCloak {display: none! Important}' (c'est-à-dire le même css utilisé par ng-cloak ) par exemple
ng-show = "tab.active" ng-class = "{'myCloak': tab.active}" qui contournera le problème.

Je vais essayer de créer un plunkr pour démontrer mais cela peut prendre un certain temps.

En attendant, je vais joindre une capture d'écran du problème tel qu'il apparaît dans notre application sous IE11 et la vidéo à partir de laquelle il a été tiré.

Sur la capture d'écran, la zone à l'intérieur des minces rectangles arrondis rouges montre la page à onglet qui n'est pas correctement affichée et l'inspection DOM correspondante. Les zones rectangulaires arrondies bleues mettent en évidence l'onglet actif qui est également affiché.

En lisant la vidéo [http://take.ms/czZZV] vous verrez qu'elle n'est pas cohérente mais cela arrive souvent.

J'ai le même problème sur Chrome 54 avec Angular 1.5.8.

La solution

Une idée de ce que pourrait être la cause?

Bonjour, j'ai réussi à mettre en place un plunk montrant ce comportement:

[https://plnkr.co/edit/PTrvz8]

Si vous l'exécutez sous IE11 et basculez entre les pages à onglet, vous devriez le voir. Le code est un peu moche mais il montre le problème. Si vous décommentez le remplacement ng-hide-animate dans style.css ( @PhilipWallin contournent) le problème disparaît.

Je vais ranger cela lundi et publier une vidéo du problème en utilisant le plunk au cas où vous ne pourriez toujours pas reproduire. J'espère que cela t'aides...

J'ai rangé un peu le plunk et ajouté une description,
https://plnkr.co/edit/l70kaJ
il y a des bordures bleues et rouges autour des pages d'onglets respectives pour rendre le mouvement de double rendu évident (sous IE11)

Comme @teterovic l'a découvert dans le numéro 13974, ce comportement semble avoir été introduit dans la version 1.4.5. Si vous changez les versions angulaire et angulaire-animée sur le plunk en 1.4.4, le comportement n'est pas là, montez à 1.4.5 et il apparaît.

@garycuthbert Merci pour le plnkr, cela montre très bien le problème (dans IE11). Je vais enquêter et voir si nous pouvons faire quelque chose.
En attendant, si vous n'utilisez pas réellement d'animations sur les éléments, vous pouvez le classNameFilter pour désactiver les animations sur cet élément: https://code.angularjs.org/snapshot/docs/api/ng/provider/ $ animateProvider # classNameFilter

Bonjour à tous,
J'ai créé un patch pour l' exemple de https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

Bonjour, il se peut que j'applique le correctif de manière incorrecte, mais j'obtiens l'erreur suivante en utilisant ce fichier:

J'ai essayé de remplacer le contenu du fichier angular-animate.js précédent ainsi que de charger explicitement le fichier angular-animate-patch.js, en me plaignant du 'fournisseur inconnu' $$ isDocumentHiddenProvider ''. Je cours avec la version 1.5.8, est-ce que je manque quelque chose?

Salut @garycuthbert J'avais initialement lié le fichier patché pour Angular Master. Voici celui pour la branche 1.5: https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

Merci @Narretz , j'ai essayé votre correctif et il résout le problème pour moi sous IE11, est-ce que ce correctif est susceptible de faire partie de la prochaine version 1.5?

J'attendrai quelques jours que quelqu'un d'autre teste, mais sinon je le fusionnerai la semaine prochaine. Nous n'avons actuellement pas de date de sortie pour la version 1.5.9, donc je pense que cela va en faire partie. Je ne peux tout simplement pas dire quand la version 1.5.9 sera publiée ...

Super, merci pour le correctif @Narretz Je garderai un œil sur la prochaine version.

Je ne peux pas encore être sûr, mais je pense que ce correctif peut également aider un autre problème que nous voyions avec nos directives, nous utilisons beaucoup de directives imbriquées qui utilisent templateUrl et, avec la dernière version angulaire, nous avons commencé à voir des transitoires assez laides rendu sur les chargements de page initiaux et afficher les transitions.

Bien que j'apprécie (plus maintenant) que le mécanisme templateUrl est asynchrone et que les directives parent / enfant ne peuvent pas attendre les unes des autres pour charger le type de rendu transitoire que nous voyions ressemblait à ce problème, c'est-à-dire que des morceaux de dom mutuellement exclusifs sont rendus brièvement dans le même espace. Nous parvenons à atténuer le problème en utilisant `` template '' au lieu de `` templateUrl '' et en renvoyant le code HTML à partir d'un cache de modèle pour accélérer le chargement, mais je vais annuler certaines de ces modifications et tester à nouveau avec votre patch animé pour voir si cela aide.

En guise d'observation finale, je pense qu'il y a des problèmes similaires avec les hooks d'animation ng-include et ui-view. C'est très difficile à cerner, mais comme notre application utilise largement les deux directives, l'effet net est assez perceptible sous IE et dans une moindre mesure sous Chrome (l'effet est le bref rendu de morceaux de dom mutuellement exclusifs, c'est-à-dire le même problème que @Narretz a adressé pour ng-hide ci-dessus).
J'avais pu améliorer la situation en préchargeant nos modèles de directives personnalisés et en utilisant 'template' pour y accéder et en réagissant aux événements de chargement / chargement déclenchés par ng-include et ui-view (en utilisant un affichage de classe personnalisé: none! important 'pour masquer les nœuds pertinents entre les événements de chargement et chargés) mais le problème était encore occasionnel.

Après avoir annulé tout cela et en spécifiant une classe d'exclusion en définissant $ animateProvider.classNameFilter comme @Narretz a suggéré que les problèmes disparaissent.

Nous n'utilisons actuellement aucune animation mais cela est susceptible de changer dans un proche avenir, nous pouvons travailler avec le classNameFilter pour activer les zones dont nous avons besoin.

@Narretz ,

Le correctif est "général" en ce sens qu'il n'est pas dans le code de la directive ngShow / ngHide, mais dans la logique d'animation elle-même. Cependant, ngShow / Hide utilise une fonction d'animation spécifique (une classe temporaire), qui n'est pas utilisée par ngInclude et ngView. Il est difficile de dire quel est le problème avec eux sans voir un exemple.

Salut Narretz,
J'essaie de résoudre ce problème depuis un certain temps et j'ai trouvé ce correctif ici qui, après application, a résolu le problème de la version 1.5.0.Beta, mais ne fonctionne toujours pas avec la version 1.5.8. Merci pour le chemin :)

Aussi dans le patch, j'ai remarqué à la fois que le double égal '==' a été utilisé où, après l'avoir changé en '===', cela fonctionne. Quelle est la syntaxe correcte pour la vérification des conditions.

J'ai également essayé cela dans d'autres versions 1.5.9 et 1.6.0, cela ne fonctionne toujours pas avec le patch de toute façon. Toute aide sera très appréciable.

Merci
Fahad

Je passerai en revue les relations publiques de inclure rapidement.

Essayé dans d'autres versions ne fonctionnant pas dans 1.5.9 et 1.6.1. Toute aide / suggestion sera très appréciable. Merci
Fahad

Toujours le même problème avec la version 1.5.10

J'ai eu le même problème, je voulais essayer de passer à la version 1.6.1 de 1.3.x et j'ai dû revenir à la version 1.4.4. Quel embarras pour l'équipe Angular

@ stijn26 vous avez probablement fait quelque chose de mal et cela devrait être une question de stackoverflow mais de toute façon:

• 1.6 a des changements de rupture par rapport à 1.X-1.5 veuillez les considérer - vous pouvez voir les changements dans le changelog sur github (essayez 1.5 instad)
• Avez-vous mis à jour tous les modules? comme angular-animate.js à la révision correspondante ou simplement angular.min.js? sinon essayez-le

J'ai vérifié tous les changements de rupture et les ai modifiés, tous les modules ont été mis à jour. J'ai eu exactement le même problème que le reste des personnes dans ce fil.

@mmomeni @ stijn26 @teterovic
Pour l'instant, nous avons trouvé le travail autour duquel activer et désactiver l'animation et cela fonctionne bien pour nous jusqu'à présent. l'exemple est ci-dessous. J'espère que cela vous aidera aussi jusqu'à ce que l'équipe trouve la bonne solution ???

$animate.enabled(false);
    $scope.$on('$destroy',
        function() {
            $animate.enabled(true);
        });

J'obtiens ce scintillement avec ng-show sur angulaire 1.6.3 sur Chrome 57 sous Windows 7. L'affichage: aucun sur .ng-hide.ng-hide-animate le corrige pour moi.

@ samal84 pouvez-vous s'il vous plaît fournir une démo? Je ne peux pas reproduire cela dans Chrome 58 avec le plnkr dans le premier post mis à jour vers 1.6.4.

Ok, cela ressemble plus à un bug avec le matériel angulaire md-switch, maintenant que j'ai essayé de faire une démo minimale: http://plnkr.co/edit/hR2B8yEPjak0v2Yryid1?p=preview

Essayez de cliquer rapidement sur le commutateur et vous devriez voir que l'activation / la désactivation à l'intérieur et à l'extérieur du commutateur md se comportent différemment. Celui à l'intérieur scintille avec les deux rendus pendant une fraction de seconde, tandis que celui à l'extérieur va bien.

@ samal84 Cela est également corrigé en désactivant $ animate (que le matériau angulaire utilise). Démo:
http://plnkr.co/edit/C08HPffIBTomH1QoBdRD?p=preview