Angular.js: ng-hide und ng-show werden in IE11 für kurze Zeit gleichzeitig angezeigt

Das kommt mir bekannt vor. Das Problem ist, dass ich diese in IE11 niemals zuverlässig reproduzieren kann. Es ist mir vielleicht einmal in 30 Mal passiert. Ich habe es auch einmal in Firefox gesehen, daher hat es möglicherweise etwas damit zu tun, wie schnell der Browser die requestAnimationFrame-Warteschlange geleert hat oder wie lange wir brauchen, um festzustellen, ob Animationen zulässig sind.

Können Sie bitte mit dem neuesten Schnappschuss testen: http://code.angularjs.org/snapshot/angular-animate.js und sehen, ob es seltener vorkommt?

In meinem IE11 wird jedes Mal, wenn ich auf das Kontrollkästchen klicke, der Blitz von beiden angezeigt. Die Verwendung des verknüpften Winkelanimats schien dieses Verhalten nicht zu ändern.

Das ist komisch. Welche IE- und OS-Version haben Sie? Und ist Ihr Computer im Allgemeinen langsam oder unter Last?

Wir haben ziemlich High-End-Computer (ich habe drei davon ausprobiert). Meine anfängliche Vermutung war, dass es schnell genug war, um etwas zu zeigen, das nur für kurze Zeit sichtbar ist. Ich verwende Windows 8.1 mit der IE-Version 11.0.9600.18202. Einer der Computer, auf denen ich es ausprobiert habe, war Windows 7, das das gleiche Problem aufwies.

Ich wende derzeit dieses CSS an, um das Problem zu vermeiden:
.ng-hide.ng-hide-animate {
Anzeige: keine! wichtig;
}}

Dies könnte uns in Zukunft natürlich Probleme bereiten, wenn wir einige ng-hide animieren und einige nicht animieren möchten.

Hm, ich habe nicht daran gedacht, dass der Computer zu schnell ist. Das könnte es sein. Ich habe auch eine etwas neuere Version von IE11 (11.0.9600.18204), aber ich bezweifle, dass dies der Grund ist.

Ich habe dies jetzt in IE11 unter meinem virtuellen Windows 7 versucht und habe das Problem möglicherweise einmal alle 2-10 Versuche festgestellt. Dies könnte daran liegen, dass meine virtuelle Maschine langsamer läuft, aber dies ist nur eine Vermutung.

Ich habe das gleiche Problem in Chrome mit einem ng-Schalter. Der spezielle Fall, in dem dies geschieht, ist, wenn eine Änderung des Ansichtswerts in ngModel festgeschrieben wird, die a) eine ng-valid-parse -Klasse im übergeordneten Formular entfernt, b) eine Klasse im Formularfeld entfernt (eine benutzerdefinierte empty class) und b) kippen ein ng-switch (weil das Formularfeld dann deaktiviert ist). Dies geschieht, weil die übergeordnete Animationsaufgabe (a) zuerst ausgeführt wird und der Scheduler wartet, bis sie abgeschlossen ist. Dann fordert er einen anderen Frame an, die Aufgabe über das Formularfeld (b) auszuführen, und wartet dann auf einen anderen Frame, um die Animationsaufgabe ng-switch auszuführen (c), was ein Flackern eines Rahmens verursacht, bei dem beide Elemente im ng-Schalter vorübergehend angezeigt werden.

@plestik kannst du eine Demo in einer plnkr.co oder ähnlichem posten?

@Narretz Ich werde es

Entschuldigung, kann es nicht in einem Plunkr reproduzieren.

@Narretz Kann ich irgendetwas tun, um dieses Problem zu beheben? Wenn Sie möchten, kann ich Ihnen Anmeldeinformationen für unsere Staging-Umgebung bereitstellen, in der ich sie konsistent reproduzieren kann.

Bearbeiten: Ich habe den Teil der Dokumentation verpasst, in dem ganz klar steht, dass das Kombinieren von Strukturanimationen mit Klassenanimationen zu Flackern führen kann. Dann macht mir das nichts aus.

Unter Chrome X treten unter OS X ähnliche Probleme auf. In meinem Fall handelt es sich um zwei ng-Shows mit unterschiedlichen Anzeigebedingungen (die niemals gleichzeitig zutreffen). Selbst wenn ich die beiden Bedingungen unmittelbar nacheinander umschalte, gibt es einen kurzen Moment, in dem beide Elemente sichtbar sind. Dies geschieht nicht in allen Seitenkonfigurationen, aber in einem bestimmten Fall ziemlich konsistent.

Ich habe das gleiche Problem auch in Chrome unter Windows mit Angular und Angular-Animate 1.4.12.

Die @ PhilipWallin- Lösung ist Problemumgehung .

Ich habe das gleiche Problem im iOS Simulator für iOS 9.3. Ich habe ein Video hochgeladen, das das Problem demonstriert: https://youtu.be/C0Lh5B1Lj6k

Ich habe mir kürzlich mit Angular-Material die Hände schmutzig gemacht und in mein bestehendes Projekt aufgenommen und dieses flackernde Verhalten in Chrome während der Verwendung von ng-if / ng-show festgestellt. Nach einigen Spuren und Fehlern wurde das Problem aufgrund von "ngAnimate" gefunden.

Die @ PhilipWallin- Lösung ist eine Problemumgehung für mich und nicht sicher, was in Zukunft nicht funktionieren würde.

Fügte einfach das Folgende in mein CSS ein und ersetzte mein "ng-if" durch "ng-show"
.ng-hide.ng-hide-animate {
Anzeige: keine! wichtig;
}}

PS: Verwenden von Angular und ngAnimate Version v1.5.7

+1

Hallo, ich habe ein ähnliches Problem mit Angular 1.5.8 (nachdem ich gerade von Version 1.12.15 aktualisiert habe).

Das Problem ist unter IE11 sehr offensichtlich, es gibt es auch unter Chrome, aber meistens ist der Übergang zu schnell, um es zu bemerken.

Die Direktive, die ich habe, ist ein Registerkartensteuerelement, das die Transklusion verwendet, um Registerkarten einzuschließen. Das Flackern, das ich erlebe (das kurz die neue und die alte aktive Registerkarte HTML nebeneinander zeigt), ist, wenn der Benutzer zwischen Registerkarten wechselt (dh nach dem Kompilieren und Laden der Vorlage). Der Code verwendet ng-show mit einem booleschen Flag, um zu entscheiden, ob die Seite angezeigt werden soll (von denen maximal 1 gleichzeitig aktiv ist).
Wenn ich ng-show durch ng-ersetze, wenn es kein Flimmern gibt.

Die Arbeit, die ich verwenden wollte, bestand darin, ng-class mit demselben bedingten ng-show-Flag zu verwenden, um eine benutzerdefinierte CSS-Klasse '.myCloak {display: none! Important}' zu aktivieren (dh dasselbe CSS, das von ng-cloak verwendet wird ) z.B
ng-show = "tab.active" ng-class = "{'myCloak': tab.active}", das das Problem umgeht.

Ich werde versuchen, einen Plunkr zu erstellen, um zu demonstrieren, aber es kann eine Weile dauern.

In der Zwischenzeit werde ich einen Screenshot des Problems anhängen, wie es in unserer App unter IE11 und dem Video, aus dem es aufgenommen wurde, erscheint.

Auf dem Screenshot zeigt der Bereich innerhalb der dünnen, rot gerundeten Rechtecke die falsch angezeigte Registerkarte und die entsprechende DOM-Prüfung. Die blau gerundeten Rechteckbereiche markieren die aktive Registerkarte, die ebenfalls angezeigt wird.

Wenn Sie das Video [http://take.ms/czZZV] abspielen, werden Sie feststellen, dass es nicht konsistent ist, aber häufig vorkommt.

Ich habe das gleiche Problem auf Chrom 54 mit Angular 1.5.8.

Die @ PhilipWallin- Lösung funktioniert jetzt auch.

Irgendeine Idee, was die Ursache sein könnte?

Hallo, ich habe es geschafft, einen Plunk zusammenzustellen, der dieses Verhalten zeigt:

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

Wenn Sie es unter IE11 ausführen und zwischen den Registerkarten wechseln, sollten Sie es sehen. Der Code ist etwas hässlich, zeigt aber das Problem. Wenn Sie die Überschreibung ng-hide-animate in style.css ( @PhilipWallin umgehen ) auskommentieren,

Ich werde dies am Montag aufräumen und ein Video des Problems mit dem Plunk veröffentlichen, falls Sie es immer noch nicht reproduzieren können. Hoffe das hilft...

Ich habe das Plunk ein wenig aufgeräumt und eine Beschreibung hinzugefügt,
https://plnkr.co/edit/l70kaJ
Es gibt blaue und rote Ränder um die jeweiligen Registerkarten, um die doppelte Renderbewegung deutlich zu machen (unter IE11).

Wie @teterovic in Ausgabe Nr. 13974 feststellte, scheint dieses Verhalten in Version 1.4.5 eingeführt worden zu sein. Wenn Sie die Winkel- und Winkelanimationsversionen auf dem Plunk auf 1.4.4 ändern, ist das Verhalten nicht vorhanden, bis auf 1.4.5, und es wird angezeigt.

@garycuthbert Danke für das plnkr, es zeigt das Problem sehr gut (in IE11). Ich werde nachforschen und sehen, ob wir etwas tun können.
Wenn Sie in der Zwischenzeit keine Animationen für die Elemente verwenden, können Sie den classNameFilter verwenden, um Animationen für dieses Element zu deaktivieren: https://code.angularjs.org/snapshot/docs/api/ng/provider/ $ animateProvider # classNameFilter

Hallo zusammen,
Ich habe einen Patch für das Beispiel von @garycuthbert erstellt . Kann jeder, der von diesem Problem betroffen ist, mit dieser eckig animierten Datei testen und zurückmelden, wenn das Problem behoben oder das Verhalten verbessert wurde? https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

Hallo, ich wende den Patch möglicherweise falsch an, erhalte jedoch bei Verwendung dieser Datei den folgenden Fehler:

Ich habe versucht, den Inhalt der vorherigen Datei angular-animate.js zu ersetzen und die Datei angle-animate-patch.js explizit zu laden. Ich habe mich über den 'unbekannten Anbieter' $$ isDocumentHiddenProvider '' beschwert. Ich laufe gegen die Version 1.5.8. Vermisse ich etwas?

Hallo @garycuthbert, ich hatte ursprünglich die gepatchte Datei für https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

Danke @Narretz , ich habe Ihren Patch ausprobiert und er behebt das Problem für mich unter IE11. Wird dieser Fix wahrscheinlich in die nächste Version 1.5 aufgenommen?

Ich werde ein paar Tage warten, bis jemand anderes es testet, aber sonst werde ich es nächste Woche zusammenführen. Wir haben derzeit kein Veröffentlichungsdatum für 1.5.9, daher denke ich, dass es das schaffen wird. Ich kann einfach nicht sagen, wann 1.5.9 veröffentlicht wird ...

Großartig, danke für das Update @Narretz. Ich werde nach der nächsten Veröffentlichung

Ich kann noch nicht sicher sein, aber ich denke, dass dieses Update auch einem anderen Problem helfen kann, das wir bei unseren Direktiven gesehen haben. Wir verwenden viele verschachtelte Direktiven, die templateUrl verwenden, und mit der neuesten Winkelversion haben wir einige ziemlich hässliche Transienten gesehen Rendern beim ersten Laden der Seite und Anzeigen von Übergängen.

Obwohl ich (jetzt mehr) zu schätzen weiß, dass der templateUrl-Mechanismus asynchron ist und Eltern / Kind-Direktiven nicht aufeinander warten können, um die Art des vorübergehenden Renderns zu laden, die wir gesehen haben, sah es ähnlich aus wie dieses Problem, dh sich gegenseitig ausschließende Dom-Blöcke, die kurz in der gleicher Raum. Es gelingt uns, das Problem zu beheben, indem wir "template" anstelle von "templateUrl" verwenden und den HTML-Code aus einem Vorlagencache zurückgeben, um das Laden zu beschleunigen. Ich werde jedoch einige dieser Änderungen rückgängig machen und mit Ihrem animierten Patch erneut testen, um festzustellen, ob dies hilfreich ist.

Als letzte Beobachtung denke ich, dass es ähnliche Probleme mit den Animations-Hooks ng-include und ui-view gibt. Es ist sehr schwer zu bestimmen, aber da unsere App beide Direktiven ausgiebig verwendet, ist der Nettoeffekt unter IE und in geringerem Maße unter Chrome deutlich spürbar (der Effekt ist das kurze Rendern von sich gegenseitig ausschließenden Domblöcken, dh das gleiche Problem, das
Ich war in der Lage, die Situation zu verbessern, indem ich unsere benutzerdefinierten Direktivenvorlagen vorgeladen und mit 'template' darauf zugegriffen und auf die von ng-include und ui-view ausgelösten Lade- / Ladeereignisse reagiert habe (mithilfe einer benutzerdefinierten Klassenanzeige: keine! wichtig ', um die relevanten Knoten zwischen dem Laden und den geladenen Ereignissen zu verschleiern), aber das Problem wurde immer noch gelegentlich gesehen.

Nachdem Sie dies alles rückgängig gemacht und eine Ausschlussklasse angegeben haben, indem Sie $ animateProvider.classNameFilter als @Narretz festgelegt haben , werden die Probleme möglicherweise

Wir verwenden derzeit keine Animationen, aber dies wird sich wahrscheinlich in naher Zukunft ändern. Wir können jedoch mit dem classNameFilter zusammenarbeiten, um die Bereiche zu aktivieren, die wir benötigen.

@Narretz ,

Das Update ist "allgemein" in dem Sinne, dass es nicht im Code der Direktive ngShow / ngHide enthalten ist, sondern in der Animationslogik selbst. NgShow / Hide verwendet jedoch eine bestimmte Animationsfunktion (eine temporäre Klasse), die von ngInclude und ngView nicht verwendet wird. Es ist schwer zu sagen, was das Problem mit ihnen ist, ohne ein Beispiel zu sehen.

Hallo Narretz,
Ich habe versucht, dieses Problem von einer Weile zu beheben und habe diesen Patch hier gefunden, der nach der Anwendung das Problem für die Version 1.5.0.Beta etwas behoben hat, aber immer noch nicht mit 1.5.8 funktioniert. Danke für den Weg :)

Auch im Patch ist mir sofort aufgefallen, dass doppelt gleich '==' verwendet wurde, wo es nach dem Ändern in '===' funktioniert. Welches ist die richtige Syntax für die Zustandsprüfung.

Ich habe dies auch in weiteren Versionen 1.5.9 und 1.6.0 versucht, es funktioniert sowieso noch nicht mit Patch. Jede Hilfe wird sehr dankbar sein.

Vielen Dank
Fahad

Ich werde @gkalpaks PR nach Weihnachten überprüfen, und dann können wir es hoffentlich schnell bekommen.

Versucht in weiteren Versionen, die in 1.5.9 und 1.6.1 nicht funktionieren. Jede Hilfe / Anregung wird sehr dankbar sein. Vielen Dank
Fahad

Immer noch das gleiche Problem mit 1.5.10

Hatte das gleiche Problem, wollte versuchen, von 1.3.x auf 1.6.1 zu aktualisieren und musste erneut auf 1.4.4 herunterstufen. Was für eine Verlegenheit für das Angular-Team

@ stijn26 du hast wahrscheinlich etwas falsch gemacht und das sollte eine stackoverflow frage sein aber trotzdem:

• 1.6 hat bahnbrechende Änderungen im Vergleich zu 1.X-1.5. Bitte berücksichtigen Sie diese - Sie können die Änderungen im Änderungsprotokoll auf Github sehen (versuchen Sie es mit 1.5 Instad).
• Haben Sie alle Module aktualisiert? wie angle-animate.js zur entsprechenden Revision oder nur angle.min.js? Wenn nicht, versuchen Sie es

Ich habe alle wichtigen Änderungen überprüft und geändert, alle Module wurden aktualisiert. Ich hatte genau das gleiche Problem wie die anderen Personen in diesem Thread.

@mmomeni @ stijn26 @teterovic
Im Moment haben wir die Arbeit gefunden, um das Animieren ein- und auszuschalten, und es funktioniert bisher gut für uns. Beispiel ist unten. Hoffe, es könnte euch auch helfen, bis das Team die richtige Lösung gefunden hat ???

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

Ich bekomme dieses Flimmern mit ng-show unter Angular 1.6.3 unter Chrome 57 unter Windows 7. Die Anzeige: keine unter .ng-hide.ng-hide-animate behebt es für mich.

@ samal84 Kannst du bitte eine Demo zur Verfügung stellen? Ich kann dies in Chrome 58 mit dem plnkr im ersten auf 1.6.4 aktualisierten Beitrag nicht reproduzieren.

Ok, es sieht eher nach einem Fehler mit md-switch aus eckigem Material aus, jetzt, wo ich versucht habe, eine minimale Demo zu erstellen :

Versuchen Sie, schnell auf den Schalter zu klicken, und Sie sollten feststellen, dass sich das Ein- und Ausschalten innerhalb und außerhalb des MD-Schalters unterschiedlich verhält. Das Innere flackert, beide werden für den Bruchteil einer Sekunde gerendert, während das Äußere in Ordnung ist.

@ samal84 Dies wird auch durch Deaktivieren von $ animate (das von eckigem Material verwendet wird) behoben. Demo:
http://plnkr.co/edit/C08HPffIBTomH1QoBdRD?p=preview