Angular.js: ng-hide y ng-show se muestran al mismo tiempo durante un corto período de tiempo en IE11

Esto suena familiar. El problema es que nunca puedo reproducirlos de manera confiable en IE11. Ha sucedido tal vez una de cada 30 veces para mí. También lo he visto una vez en Firefox, por lo que tal vez tenga algo que ver con la rapidez con la que el navegador descargó la cola requestAnimationFrame, o con cuánto tiempo tardamos en detectar si las animaciones están permitidas.

¿Puedes probar con la última instantánea: http://code.angularjs.org/snapshot/angular-animate.js y ver si ocurre con menos frecuencia?

En mi IE11, obtengo el flash de ambos que se muestran cada vez que hago clic en la casilla de verificación. El uso de la animación angular vinculada no pareció cambiar este comportamiento.

Eso es raro. ¿Qué versión de IE y SO tienes? ¿Y su computadora generalmente es lenta o tiene poca carga?

Tenemos computadoras bastante de gama alta (probé en tres de ellas), mi conjetura inicial fue que en realidad era lo suficientemente rápido como para mostrar algo que solo es visible por un corto período de tiempo. Estoy ejecutando Windows 8.1 con la versión de IE 11.0.9600.18202. Una de las computadoras en las que lo probé fue Windows 7, que mostraba el mismo problema.

Actualmente estoy aplicando este CSS para evitar el problema:
.ng-hide.ng-hide-animate {
pantalla: ninguna! importante;
}

Por supuesto, esto podría causarnos problemas en el futuro si queremos animar algunos ng-hide y no animar algunos.

Hm, no pensé que la computadora fuera demasiado rápida. Podría ser eso. También tengo una versión un poco más nueva de IE11 (11.0.9600.18204), pero dudo que esa sea la razón.

Probé esto ahora en IE11 en mi Windows 7 virtual, y experimento el problema tal vez una vez cada 2-10 intentos. Esto podría deberse a que mi máquina virtual funciona más lentamente, pero esto es solo una suposición.

Tengo el mismo problema en Chrome, con un ng-switch. El caso específico en el que ocurre es cuando se confirma un cambio de valor de vista en ngModel, que a) elimina una clase ng-valid-parse en el formulario principal, b) elimina una clase en el campo del formulario (un empty class) yb) voltea un ng-switch (porque el campo del formulario está deshabilitado). Sucede porque la tarea de animación principal (a) se ejecuta primero, y el programador espera hasta que se complete, luego solicita otro marco para ejecutar la tarea desde el campo de formulario (b), luego espera _ otro_ marco para ejecutar la tarea de animación ng-switch (c), provocando un parpadeo de un cuadro donde ambos elementos en el ng-switch se muestran temporalmente.

@plestik ¿puedes publicar una demostración en plnkr.co o similar?

@Narretz Lo

Lo siento, no puedo reproducirlo en Plunkr.

@Narretz, ¿hay algo que pueda hacer para ayudar a resolver este problema? Si lo desea, puedo proporcionarle las credenciales de inicio de sesión para nuestro entorno de ensayo, donde puedo reproducirlo de forma coherente.

Editar: me perdí la parte de los documentos donde dice claramente que combinar animaciones estructurales con animaciones de clase puede provocar parpadeos. Entonces no me hagas caso.

Estoy experimentando problemas similares en Chrome con OS X. En mi caso, son dos ng-show's con distintas condiciones de visualización (que nunca son verdaderas al mismo tiempo). Incluso si alterno las dos condiciones inmediatamente una después de la otra, hay un breve momento en el que ambos elementos son visibles. Esto no sucede en todas las configuraciones de página, pero ocurre de manera bastante consistente en un caso particular.

También tengo el mismo problema en Chrome en Windows, usando angular y angular-animado 1.4.12.

La solución

Estoy experimentando el mismo problema en el simulador de iOS para iOS 9.3. He subido un video que demuestra el problema: https://youtu.be/C0Lh5B1Lj6k

Recientemente me ensucié las manos con material angular y lo incluí en mi proyecto existente y comencé a experimentar este comportamiento de parpadeo en Chrome mientras usaba ng-if / ng-show. Después de algún rastro y error, se encontró el problema causado por "ngAnimate".

La solución

Acabo de agregar lo siguiente en mi CSS y reemplacé mi "ng-if" por "ng-show"
.ng-hide.ng-hide-animate {
pantalla: ninguna! importante;
}

PD: usando Angular y ngAnimate versión v1.5.7

+1

Hola, estoy experimentando un problema similar con angular 1.5.8 (acabo de actualizar desde v 1.12.15).

El problema es muy evidente en IE11, también está allí en Chrome, pero la mayoría de las veces la transición es demasiado rápida para darse cuenta.

La directiva que tengo es un control de pestañas que usa la transclusión para incluir páginas de pestañas. El parpadeo que estoy experimentando (que muestra brevemente el html de la página de pestañas activa nuevo y antiguo uno al lado del otro) es cuando el usuario cambia entre pestañas (es decir, después de la compilación y carga de la plantilla). El código usa ng-show con una bandera booleana para decidir si mostrar o no la página (de la cual un máximo de 1 está activo en cualquier momento).
Si reemplazo ng-show con ng-if no hay parpadeo.

La solución que había estado planeando usar era usar ng-class con la misma bandera condicional ng-show para activar una clase CSS personalizada '.myCloak {display: none! Important}' (es decir, el mismo CSS usado por ng-cloak ) p.ej
ng-show = "tab.active" ng-class = "{'myCloak': tab.active}" que soluciona el problema.

Intentaré crear un plunkr para demostrarlo, pero puede llevar un tiempo.

Mientras tanto, adjuntaré una captura de pantalla del problema tal como aparece en nuestra aplicación en IE11 y el video del que se tomó.

En la captura de pantalla, el área dentro de los delgados rectángulos redondeados rojos muestra la página de la pestaña que se muestra incorrectamente y la inspección DOM correspondiente. Las áreas del rectángulo redondeado azul resaltan la pestaña activa que también se muestra.

Al reproducir el video [http://take.ms/czZZV], verá que no es consistente, pero sucede con frecuencia.

Tengo el mismo problema en Chrome 54 con Angular 1.5.8.

La solución

¿Alguna idea de cuál podría ser la causa?

Hola, me las arreglé para armar un plunk que muestra este comportamiento:

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

Si lo ejecuta bajo IE11 y cambia entre las páginas de pestañas, debería verlo. El código es un poco feo pero muestra el problema. Si quita el comentario de la anulación ng-hide-animate en style.css ( @PhilipWallin funciona), el problema desaparece.

Arreglaré esto el lunes y publicaré un video del problema usando el plunk en caso de que aún no puedas reproducirlo. Espero que esto ayude...

He ordenado un poco el plunk y he añadido una descripción,
https://plnkr.co/edit/l70kaJ
hay bordes azules y rojos alrededor de las respectivas páginas de pestañas para hacer que el movimiento de renderizado doble sea obvio (en IE11)

Como descubrió @teterovic en el número 13974, este comportamiento parece haberse introducido en la versión 1.4.5. Si cambia las versiones angular y animada angular en el plunk a 1.4.4, el comportamiento no está allí, suba a 1.4.5 y aparece.

@garycuthbert Gracias por plnkr, muestra muy bien el problema (en IE11). Investigaré y veré si hay algo que podamos hacer.
Mientras tanto, si no usa animaciones en los elementos, puede usar classNameFilter para deshabilitar las animaciones en ese elemento: https://code.angularjs.org/snapshot/docs/api/ng/provider/ $ animateProvider # classNameFilter

Hola a todos,
He creado un parche para el ejemplo de @garycuthbert . ¿Pueden todos los afectados por este problema probar con este archivo de animación angular e informar si el problema desaparece o se mejora el comportamiento? https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

Hola, es posible que esté aplicando el parche incorrectamente, pero obtengo el siguiente error al usar este archivo:

Intenté reemplazar el contenido del archivo angular-animate.js anterior, así como cargar explícitamente el archivo angular-animate-patch.js, quejándome de 'proveedor desconocido' $$ isDocumentHiddenProvider ''. Estoy corriendo contra la versión 1.5.8, ¿me falta algo?

Hola @garycuthbert Originalmente había vinculado el archivo parcheado para angular master. Aquí está el de la rama 1.5: https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

Gracias @Narretz , probé su parche y me resuelve el problema en IE11, ¿es probable que esta solución llegue a la próxima versión 1.5?

Esperaré unos días para que otra persona realice la prueba, pero de lo contrario, lo fusionaré la semana que viene. Actualmente no tenemos fecha de lanzamiento para 1.5.9, así que creo que lo logrará. Simplemente no puedo decir cuándo se lanzará 1.5.9 ...

Genial, gracias por la corrección @Narretz. Estaré atento a la próxima versión.

No puedo estar seguro todavía, pero creo que esta solución también puede ayudar a otro problema que estábamos viendo con nuestras directivas, usamos muchas directivas anidadas que usan templateUrl y, con la última versión angular, comenzamos a ver algunos transitorios bastante feos renderizado en cargas de página iniciales y transiciones de vista.

Aunque aprecio (más ahora) que el mecanismo templateUrl es asincrónico y que las directivas padre / hijo no pueden esperar unas a otras para cargar el tipo de renderizado transitorio que estábamos viendo similar a este problema, es decir, fragmentos de dom mutuamente excluyentes que se renderizan brevemente en el mismo espacio. Estamos logrando aliviar el problema usando 'template' en lugar de 'templateUrl' y devolviendo el html desde una caché de plantillas para acelerar la carga, pero deshaceré algunos de estos cambios y volveré a probar con su parche animado para ver si ayuda.

Como observación final, creo que hay problemas similares con los ganchos de animación ng-include y ui-view. Es muy difícil de precisar, pero como nuestra aplicación usa ambas directivas extensamente, el efecto neto es bastante notable en IE y en menor medida en Chrome (el efecto es la representación breve de fragmentos de dom que se excluyen mutuamente, es decir, el mismo problema que @Narretz tiene abordado para ng-hide arriba).
Pude mejorar la situación cargando previamente nuestras plantillas de directivas personalizadas y usando 'plantilla' para acceder a ellas y reaccionando a los eventos de carga / carga disparados por ng-include y ui-view (usando una pantalla de clase personalizada: none! important 'para ocultar los nodos relevantes entre la carga y los eventos cargados), pero el problema todavía se veía ocasionalmente.

Habiendo deshecho todo esto y especificando una clase de exclusión configurando $ animateProvider.classNameFilter como @Narretz sugirió que los problemas desaparecerían.

Actualmente no usamos ninguna animación, pero es probable que esto cambie en un futuro cercano, aunque podemos trabajar con classNameFilter para activar las áreas que necesitamos.

@Narretz , no estoy seguro de si su corrección se puede aplicar de manera más general para cubrir escenarios ng-include y ui-view, pero los síntomas ciertamente parecen iguales.

La solución es "general" en el sentido de que no está en el código de la directiva ngShow / ngHide, sino en la propia lógica de animación. Sin embargo, ngShow / Hide usa una función de animación específica (una clase temporal), que no es usada por ngInclude y ngView. Es difícil decir cuál es el problema con ellos sin ver un ejemplo.

Hola Narretz,
He estado tratando de solucionar este problema desde hace un tiempo y encontré este parche aquí que, después de aplicarlo, solucionó el problema para la versión 1.5.0.Beta algo, pero aún no funciona con 1.5.8. Gracias por el camino :)

También en el parche noté de inmediato que se ha usado doble igual '==' donde después de cambiarlo a '===' funciona. Cuál es la sintaxis correcta para la verificación de condiciones.

También probé esto en versiones posteriores 1.5.9 y 1.6.0, de todos modos todavía no funciona con el parche. Cualquier ayuda será muy apreciada.

Gracias
Fahad

Revisaré las relaciones públicas de

Probado en otras versiones que no funcionan en 1.5.9 y 1.6.1. Cualquier ayuda / sugerencia será muy apreciada. Gracias
Fahad

Sigue siendo el mismo problema con 1.5.10

Tuve el mismo problema, quise intentar actualizar a 1.6.1 desde 1.3.xy tuve que degradar nuevamente a 1.4.4. Qué vergüenza para el equipo de Angular

@ stijn26 probablemente hizo algo mal y esta debería ser una pregunta de stackoverflow, pero de todos modos:

• 1.6 tiene cambios importantes en comparación con 1.X-1.5, considérelos: puede ver los cambios en el registro de cambios en github (intente 1.5 instad)
• ¿Actualizaste todos los módulos? como angular-animate.js a la revisión correspondiente o simplemente angular.min.js? si no, pruébalo

Revisé todos los cambios importantes y los modifiqué, todos los módulos se actualizaron. Tuve exactamente el mismo problema que el resto de las personas en este hilo.

@mmomeni @ stijn26 @teterovic
Por ahora, encontramos el trabajo en torno a encender y apagar la animación y nos está funcionando bien hasta ahora. a continuación se muestra un ejemplo. Espero que les ayude a ustedes también hasta que el equipo encuentre la solución correcta.

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

Recibo este parpadeo con ng-show en angular 1.6.3 en Chrome 57 en Windows 7. La pantalla: none en .ng-hide.ng-hide-animate lo corrige por mí.

@ samal84 ¿puede proporcionar una demostración? No puedo reproducir esto en Chrome 58 con el plnkr en la primera publicación actualizada a 1.6.4.

Ok, parece más un error con material angular md-switch, ahora que intenté hacer una demostración mínima: http://plnkr.co/edit/hR2B8yEPjak0v2Yryid1?p=preview

Intente hacer clic en el interruptor rápidamente, y debería ver que el encendido / apagado dentro y fuera del interruptor md se comporta de manera diferente. El interior parpadea y ambos se renderizan durante una fracción de segundo, mientras que el exterior está bien.

@ samal84 Eso también se soluciona deshabilitando $ animate (que usa material angular). Manifestación:
http://plnkr.co/edit/C08HPffIBTomH1QoBdRD?p=preview