Angular.js: ng-hide e ng-show sendo exibidos ao mesmo tempo por um curto período de tempo no IE11

Isso soa familiar. O problema é que nunca consigo reproduzi-los de forma confiável no IE11. Aconteceu talvez uma vez em 30 vezes para mim. Também o vi uma vez no Firefox, então talvez tenha algo a ver com a rapidez com que o navegador liberou a fila requestAnimationFrame ou com o tempo que levamos para detectar se as animações são permitidas.

Você pode testar com o instantâneo mais recente: http://code.angularjs.org/snapshot/angular-animate.js e ver se isso acontece com menos frequência?

No meu IE11, recebo o flash de ambos sempre que clico na caixa de seleção. Usar a animação angular vinculada não parece alterar esse comportamento.

Isso é estranho. Qual versão do IE e do sistema operacional você tem? E o seu computador geralmente está lento ou sob carga?

Temos computadores de ponta (experimentei três deles), mas meu palpite inicial era que ele era rápido o suficiente para mostrar algo que só fica visível por um curto período de tempo. Estou executando o Windows 8.1 com o IE versão 11.0.9600.18202. Um dos computadores que experimentei era o Windows 7, apresentando o mesmo problema.

No momento, estou aplicando este css para evitar o problema:
.ng-hide.ng-hide-animate {
display: nenhum! importante;
}

É claro que isso pode nos causar problemas no futuro, se quisermos animar algum ng-hide e não animar alguns.

Hm, não pensei que o computador fosse muito rápido. Poderia ser isso. Também tenho uma versão um pouco mais recente do IE11 (11.0.9600.18204), mas duvido que seja esse o motivo.

Eu tentei isso agora no IE11 no meu Windows 7 virtual e tenho o problema talvez uma vez a cada 2-10 tentativas. Isso pode ser porque minha máquina virtual está funcionando mais lentamente, mas isso é apenas um palpite.

Estou tendo o mesmo problema no Chrome, w / an ng-switch. O caso específico em que isso acontece é quando uma mudança de valor de visualização em ngModel é confirmada, que a) remove uma classe ng-valid-parse no formulário pai, b) remove uma classe no campo do formulário (um empty class) eb) inverte um ng-switch (porque o campo do formulário é então desabilitado). Isso acontece porque a tarefa da animação pai (a) é executada primeiro e o agendador espera até que seja concluída, em seguida, solicita outro quadro para executar a tarefa do campo do formulário (b) e, em seguida, espera _another_ frame para executar a tarefa de animação ng-switch (c), causando uma oscilação de um quadro onde ambos os elementos no ng-switch são exibidos temporariamente.

@plestik você pode postar uma demonstração em um plnkr.co ou similar?

@Narretz Vou tentar. Mas isso deveria funcionar com animações aninhadas se apenas executar um grupo de animações a cada quadro?

Desculpe, não posso reproduzi-lo em um Plunkr.

@Narretz, há algo que eu possa fazer para ajudar a resolver esse problema? Se você quiser, posso fornecer credenciais com login para nosso ambiente de teste, onde posso reproduzi-lo de forma consistente.

Edit: Eu perdi a parte dos documentos em que diz claramente que combinar animações estruturais com animações de classe pode causar oscilações. Não se preocupe comigo, então.

Estou tendo problemas semelhantes no Chrome com OS X. No meu caso, são dois ng-show com condições de exibição distintas (que nunca são verdadeiras ao mesmo tempo). Mesmo se eu alternar as duas condições imediatamente após a outra, haverá um breve momento em que ambos os elementos serão visíveis. Isso não acontece em todas as configurações de página, mas acontece de forma bastante consistente em um caso particular.

Eu também tenho o mesmo problema no Chrome no Windows, usando angular e animação angular 1.4.12.

A solução

Estou tendo o mesmo problema no simulador iOS para iOS 9.3. Enviei um vídeo demonstrando o problema: https://youtu.be/C0Lh5B1Lj6k

Recentemente, sujei minhas mãos ao uso de material Angular e incluí em meu projeto existente e comecei a experimentar esse comportamento de oscilação no Chrome ao usar ng-if / ng-show. Depois de alguma trilha e erro encontrado o problema causado devido ao "ngAnimate".

A solução

Apenas adicionei o seguinte no meu CSS e substituí meu "ng-if" por "ng-show"
.ng-hide.ng-hide-animate {
display: nenhum! importante;
}

PS: usando Angular e ngAnimate versão v1.5.7

+1

Olá, estou tendo um problema semelhante com o angular 1.5.8 (acabei de atualizar da v 1.12.15).

O problema é muito aparente no IE11, também existe no Chrome, mas na maioria das vezes a transição é rápida demais para ser notada.

A diretiva que tenho é um controle de guia que usa a transclusão para incluir páginas de guia. A oscilação que estou experimentando (que mostra rapidamente a nova e a antiga página da guia ativa html lado a lado) é quando o usuário alterna entre as guias (ou seja, após a compilação e o carregamento do modelo). O código usa ng-show com um sinalizador booleano para decidir se deve ou não exibir a página (da qual no máximo 1 está ativo a qualquer momento).
Se eu substituir ng-show por ng-if, não haverá oscilação.

A solução que eu estava planejando usar era usar ng-class com o mesmo sinalizador condicional ng-show para ativar uma classe css personalizada '.myCloak {display: none! Important}' (ou seja, o mesmo css usado pelo ng-cloak ) por exemplo
ng-show = "tab.active" ng-class = "{'myCloak': tab.active}" que contorna o problema.

Vou tentar criar um plunkr para demonstrar, mas pode demorar um pouco.

Enquanto isso, anexarei uma captura de tela do problema conforme aparece em nosso aplicativo no IE11 e o vídeo de onde foi tirado.

Na captura de tela, a área dentro dos finos retângulos redondos vermelhos mostra a página da guia que está sendo exibida incorretamente e a inspeção do DOM relevante. As áreas do retângulo arredondado azul destacam a guia ativa, que também é exibida.

Ao reproduzir o vídeo [http://take.ms/czZZV], você verá que não é consistente, mas acontece com frequência.

Tenho o mesmo problema no Chrome 54 com Angular 1.5.8.

A solução

Alguma ideia de qual poderia ser a causa?

Olá, consegui montar um plunk mostrando este comportamento:

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

Se você executá-lo no IE11 e alternar entre as páginas da guia, deverá vê-lo. O código é um pouco feio, mas mostra o problema. Se você remover o comentário do ng-hide-animate override em style.css ( solução alternativa para @PhilipWallin ), o problema desaparece.

Vou arrumar isso na segunda e postar um vídeo do problema usando o plunk caso você ainda não consiga reproduzir. Espero que isto ajude...

Eu arrumei o plunk um pouco e adicionei uma descrição,
https://plnkr.co/edit/l70kaJ
existem bordas azuis e vermelhas ao redor das respectivas páginas de guia para tornar o movimento de renderização dupla óbvio (no IE11)

Como @teterovic descobriu na edição # 13974, esse comportamento parece ter sido introduzido na versão 1.4.5. Se você alterar as versões angular e angular animada no plunk para 1.4.4 o comportamento não está lá, suba para 1.4.5 e ele aparece.

@garycuthbert Obrigado pelo plnkr, ele mostra o problema muito bem (no IE11). Vou investigar e ver se há algo que possamos fazer.
Enquanto isso, se você não usar animações nos elementos, pode usar o classNameFilter para desativar as animações nesse elemento: https://code.angularjs.org/snapshot/docs/api/ng/provider/ $ animateProvider # classNameFilter

Olá a todos,
Eu criei um patch para o exemplo de @garycuthbert . Todos os afetados por esse problema podem testar com este arquivo angular animado e relatar se o problema for embora ou se o comportamento for melhorado? https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

Olá, posso estar aplicando o patch incorretamente, mas estou recebendo o seguinte erro ao usar este arquivo:

Tentei substituir o conteúdo do arquivo angular-animate.js anterior, bem como carregar explicitamente o arquivo angular-animate-patch.js, reclamando sobre 'provedor desconhecido' $$ isDocumentHiddenProvider ''. Estou executando contra a versão 1.5.8, estou faltando alguma coisa?

Olá, @garycuthbert , originalmente https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

Obrigado @Narretz , tentei seu patch e ele resolve o problema para mim no IE11. É provável que essa correção

Vou esperar alguns dias para que outra pessoa teste, mas, caso contrário, irei mesclá-lo na próxima semana. No momento, não temos data de lançamento para 1.5.9, então acho que vou fazer isso. Só não posso dizer quando 1.5.9 será lançado ...

Ótimo, obrigado pela correção @Narretz , ficarei de olho no próximo lançamento.

Não posso ter certeza ainda, mas acho que essa correção também pode ajudar outro problema que estávamos vendo com nossas diretivas, usamos muitas diretivas aninhadas que usam templateUrl e, com a última versão angular, começamos a ver alguns transitórios bastante feios renderização em carregamentos de página inicial e transições de exibição.

Embora eu aprecie (mais agora) que o mecanismo templateUrl é assíncrono e as diretivas pai / filho não podem esperar que as outras carreguem o tipo de renderização transiente que estávamos vendo parecia semelhante a este problema, ou seja, pedaços mutuamente exclusivos de dom sendo renderizados brevemente no mesmo espaço. Estamos conseguindo amenizar o problema usando 'template' em vez de 'templateUrl' e retornando o html de um cache de template para acelerar o carregamento, mas vou desfazer algumas dessas mudanças e testar novamente com seu patch animado para ver se ajuda.

Como observação final, acho que há problemas semelhantes com os ganchos de animação ng-include e ui-view. É muito difícil de definir, mas como nosso aplicativo usa ambas as diretivas extensivamente, o efeito líquido é bastante perceptível no IE e em menor medida no Chrome (o efeito é a breve renderização de pedaços mutuamente exclusivos de dom, ou seja, o mesmo problema que @Narretz tem endereçado para ng-hide acima).
Eu tinha sido capaz de melhorar a situação pré-carregando nossos modelos de diretiva personalizados e usando 'modelo' para acessá-los e reagindo aos eventos de carga / carregados disparados por ng-include e ui-view (usando uma exibição de classe personalizada: nenhum! importante 'para ocultar os nós relevantes entre os eventos de carregamento e carregados), mas o problema ainda era visto ocasionalmente.

Tendo desfeito tudo isso e especificando uma classe de exclusão, definindo $ animateProvider.classNameFilter como @Narretz sugeriu que os problemas desaparecem.

No momento, não usamos nenhuma animação, mas é provável que isso mude em um futuro próximo, mas podemos trabalhar com o classNameFilter para ativar as áreas de que precisamos.

@Narretz , não tenho certeza se sua correção pode ser aplicada de forma mais geral para cobrir cenários de ng-include e ui-view, mas os sintomas certamente parecem os mesmos.

A correção é "geral" no sentido de que não está no código da diretiva ngShow / ngHide, mas na própria lógica da animação. No entanto, ngShow / Hide usa uma função de animação específica (uma classe temporária), que não é usada por ngInclude e ngView. É difícil dizer qual é o problema com eles sem ver um exemplo.

Oi Narretz,
Venho tentando consertar esse problema há um tempo e encontrei esse patch aqui que depois de aplicado corrigiu o problema para a versão 1.5.0.Beta algo, mas ainda não funciona com a 1.5.8. Obrigado pelo caminho :)

Também no patch eu notei que foi usado double equal '==' onde depois de mudá-lo para '===' ele funciona. Qual é a sintaxe correta para verificação de condição.

Eu também tentei isso em outras versões 1.5.9 e 1.6.0, mas ainda não está funcionando com o patch. Qualquer ajuda será muito apreciável.

Obrigado
Fahad

Vou revisar as relações públicas de @gkalpak depois do Natal e, com sorte, podemos

Tentei em outras versões e não funcionava em 1.5.9 e 1.6.1. Qualquer ajuda / sugestão será altamente apreciável. Obrigado
Fahad

Ainda o mesmo problema com 1.5.10

Tive o mesmo problema, queria tentar atualizar para 1.6.1 de 1.3.x e tive que fazer o downgrade novamente para 1.4.4. Que constrangimento para a equipe Angular

@ stijn26 provavelmente você fez algo errado e esta deve ser uma questão de stackoverflow, mas de qualquer maneira:

• 1.6 tem mudanças significativas em comparação com 1.X-1.5, por favor, considere-as - você pode ver as mudanças no changelog no github (tente 1.5 instad)
• Você atualizou todos os módulos? como angular-animate.js para a revisão correspondente ou apenas angular.min.js? se não tentar

Eu verifiquei todas as mudanças importantes e as modifiquei, todos os módulos foram atualizados. Eu tive exatamente o mesmo problema que o resto das pessoas neste tópico.

@mmomeni @ stijn26 @teterovic
Por enquanto, descobrimos que a solução é ligar e desligar a animação e está funcionando bem para nós até agora. o exemplo está abaixo. Espero que possa ajudar vocês também até que a equipe encontre a solução certa ???

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

Estou recebendo esta cintilação com ng-show no angular 1.6.3 no Chrome 57 no Windows 7. O display: none em .ng-hide.ng-hide-animate corrige isso para mim.

@ samal84 você pode fornecer uma demonstração? Não consigo reproduzir isso no Chrome 58 com o plnkr no primeiro post atualizado para 1.6.4.

Ok, parece mais um bug com material angular md-switch, agora que tentei fazer uma demonstração mínima: http://plnkr.co/edit/hR2B8yEPjak0v2Yryid1?p=preview

Tente clicar no botão rapidamente e você verá que liga / desliga dentro e fora do botão md se comportam de maneira diferente. O de dentro pisca com ambos sendo renderizados por uma fração de segundo, enquanto o de fora está bem.

@ samal84 Isso também foi corrigido desabilitando $ animate (que o angular-material usa). Demo:
http://plnkr.co/edit/C08HPffIBTomH1QoBdRD?p=preview