Angular.js: ng-hide и ng-show отображаются одновременно в течение короткого периода времени в IE11

Звучит знакомо. Проблема в том, что я никогда не смогу надежно воспроизвести их в IE11. Со мной такое случалось, может быть, раз из 30. Я также однажды видел это в Firefox, так что, возможно, это как-то связано с тем, насколько быстро браузер сбрасывает очередь requestAnimationFrame или с тем, сколько времени нам нужно, чтобы определить, разрешены ли анимации.

Не могли бы вы протестировать с последним снимком: http://code.angularjs.org/snapshot/angular-animate.js и посмотреть, случается ли это реже?

В моем IE11 каждый раз, когда я устанавливаю флажок, оба мигают. Использование связанного angular-animate, похоже, не изменило этого поведения.

Это странно. Какая у вас версия IE и ОС? И ваш компьютер в целом медленный или перегружен?

У нас есть довольно высококлассные компьютеры (я пробовал три из них), я изначально предполагал, что они достаточно быстрые, чтобы показать что-то, что можно увидеть только в течение короткого промежутка времени. Я использую Windows 8.1 с IE версии 11.0.9600.18202. Один из компьютеров, на котором я его пробовал, был Windows 7, с той же проблемой.

В настоящее время я применяю этот CSS, чтобы избежать проблемы:
.ng-hide.ng-hide-animate {
дисплей: нет! важно;
}

Это, конечно, может вызвать у нас проблемы в будущем, если мы захотим анимировать некоторые ng-hide, а не анимировать некоторые.

Хм, я не думал о том, что компьютер работает слишком быстро. Это могло быть так. У меня также есть немного более новая версия IE11 (11.0.9600.18204), но я сомневаюсь, что это причина.

Я пробовал это сейчас в IE11 на моей виртуальной Windows 7, и проблема возникает, может быть, раз в 2-10 попыток. Это могло быть связано с тем, что моя виртуальная машина работает медленнее, но это только предположение.

У меня такая же проблема в Chrome, с переключателем ng. Конкретный случай, когда это происходит, - когда фиксируется изменение значения представления в ngModel, что: а) удаляет класс ng-valid-parse в родительской форме, б) удаляет класс в поле формы (настраиваемый empty class) и b) переворачивает ng-switch (поскольку в этом случае поле формы отключено). Это происходит потому, что сначала запускается родительская задача анимации (a), а планировщик ждет, пока она не будет завершена, затем запрашивает другой кадр для запуска задачи из поля формы (b), а затем ожидает _другой_ кадр для запуска задачи анимации ng-switch (c), вызывая мерцание одного кадра, где временно отображаются оба элемента в ng-switch.

@plestik, можете ли вы опубликовать демонстрацию на сайте plnkr.co или подобном?

@Narretz Я

Извините, не могу воспроизвести его в Plunkr.

@Narretz, могу ли я чем-нибудь помочь решить эту проблему? Если вы хотите, я могу предоставить вам учетные данные для входа в нашу промежуточную среду, где я могу воспроизводить их последовательно.

Изменить: я пропустил часть документов, где довольно четко говорится, что объединение структурных анимаций с анимациями классов может привести к мерцанию. Тогда не обращайте на меня внимания.

Я испытываю аналогичные проблемы в Chrome с OS X. В моем случае это два ng-show с разными условиями отображения (которые никогда не выполняются одновременно). Даже если я переключу два условия сразу после друг друга, есть короткий момент, когда оба элемента будут видны. Это происходит не во всех конфигурациях страниц, но происходит довольно последовательно в одном конкретном случае.

У меня также есть такая же проблема в Chrome в Windows, используя angular и angular-animate 1.4.12.

Решение @PhilipWallin на данный момент является хорошим решением.

У меня такая же проблема в симуляторе iOS для iOS 9.3. Я загрузил видео, демонстрирующее проблему: https://youtu.be/C0Lh5B1Lj6k

Недавно я испачкал руки, используя материал Angular и включил его в свой существующий проект, и начал испытывать это мерцание в Chrome при использовании ng-if / ng-show. После некоторого следа и ошибки была обнаружена проблема, вызванная "ngAnimate".

Решение @PhilipWallin работает для меня как обходной путь, и я не уверен, что не сработает в будущем.

Просто добавил ниже в свой CSS и заменил мое «ng-if» на «ng-show»
.ng-hide.ng-hide-animate {
дисплей: нет! важно;
}

PS: с использованием Angular и ngAnimate версии v1.5.7

+1

Привет, я испытываю аналогичную проблему с angular 1.5.8 (только что обновился с версии 1.12.15).

Проблема очень очевидна в IE11, она есть и в Chrome, но чаще всего переход происходит слишком быстро, чтобы его можно было заметить.

У меня есть директива - это элемент управления вкладками, который использует включение для включения страниц вкладок. Мерцание, которое я испытываю (которое кратко показывает новую и старую активную страницу вкладок html бок о бок), возникает, когда пользователь переключается между вкладками (то есть после компиляции и загрузки шаблона). Код использует ng-show с логическим флагом, чтобы решить, отображать ли страницу (из которых максимум 1 активен одновременно).
Если я заменю ng-show на ng-if нет мерцания.

Работа, которую я планировал использовать, заключалась в использовании ng-class с тем же условным флагом ng-show для активации настраиваемого класса css '.myCloak {display: none! Important}' (то есть того же css, что и ng-cloak ) например
ng-show = "tab.active" ng-class = "{'myCloak': tab.active}", который помогает обойти проблему.

Я попытаюсь создать plunkr для демонстрации, но это может занять некоторое время.

А пока я приложу снимок экрана с изображением проблемы, появившейся в нашем приложении в IE11, и видео, из которого она была взята.

На снимке экрана область в тонких красных прямоугольниках с закругленными углами показывает неверно отображаемую вкладку и соответствующую проверку DOM. Области синего прямоугольника с закругленными углами выделяют активную вкладку, которая также отображается.

Посмотрев видео [http://take.ms/czZZV], вы увидите, что оно непоследовательно, но это случается часто.

У меня такая же проблема на chrome 54 с Angular 1.5.8.

Решение @PhilipWallin пока работает.

Есть идеи, в чем может быть причина?

Здравствуйте, мне удалось собрать кусок, демонстрирующий это поведение:

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

Если вы запустите его в IE11 и переключитесь между страницами вкладок, вы должны его увидеть. Код немного некрасивый, но он показывает проблему. Если вы раскомментируете переопределение ng-hide-animate в style.css ( обход @PhilipWallin ), проблема исчезнет.

Я уберу это в понедельник и опубликую видео о проблеме, используя планку, на случай, если вы все еще не можете воспроизвести. Надеюсь это поможет...

Я немного прибрал доску и добавил описание,
https://plnkr.co/edit/l70kaJ
вокруг соответствующих страниц вкладок есть синие и красные границы, чтобы сделать движение двойного рендеринга очевидным (в IE11)

Как обнаружил @teterovic в выпуске № 13974, такое поведение, похоже, было введено в версии 1.4.5. Если вы измените версии angular и angular-animate на plunk на 1.4.4, поведения не будет, до 1.4.5, и оно появится.

@garycuthbert Спасибо за plnkr, он очень хорошо показывает проблему (в IE11). Я займусь расследованием и посмотрю, можем ли мы что-нибудь сделать.
Между тем, если вы на самом деле не используете анимацию для элементов, вы можете с помощью classNameFilter отключить анимацию для этого элемента: https://code.angularjs.org/snapshot/docs/api/ng/provider/ $ animateProvider # classNameFilter

Привет всем,
Я создал патч для примера @garycuthbert . Может ли каждый, кто столкнулся с этой проблемой, протестировать этот файл angular-animate и сообщить, если проблема исчезнет или поведение улучшится? https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

Привет, я могу неправильно применить патч, но при использовании этого файла я получаю следующую ошибку:

Я попытался заменить содержимое предыдущего файла angular-animate.js, а также явно загрузить файл angular-animate-patch.js, жалуясь на «неизвестный поставщик» $$ isDocumentHiddenProvider ''. Я работаю с версией 1.5.8, мне что-то не хватает?

Привет, @garycuthbert, я изначально связал исправленный файл для angular master. Вот тот для ветки 1.5: https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

Спасибо @Narretz , я попробовал ваш патч, и он решает проблему для меня в IE11. Вероятно, это исправление войдет в следующую версию 1.5?

Я подожду несколько дней, пока кто-нибудь еще не протестирует, но в противном случае я объединю его на следующей неделе. В настоящее время у нас нет даты выпуска 1.5.9, поэтому я думаю, что она войдет в нее. Я просто не могу сказать, когда выйдет 1.5.9 ...

Отлично, спасибо за исправление @Narretz, я буду следить за следующим выпуском.

Я еще не уверен, но я думаю, что это исправление также может помочь другой проблеме, которую мы наблюдали с нашими директивами, мы используем много вложенных директив, которые используют templateUrl, и с последним выпуском angular мы начали видеть некоторые довольно уродливые временные рендеринг при начальной загрузке страницы и переходах просмотра.

Хотя я ценю (в большей степени сейчас), что механизм templateUrl является асинхронным, и родительские / дочерние директивы не могут ждать друг от друга, чтобы загрузить вид переходного рендеринга, который мы наблюдали, похож на эту проблему, т.е. такое же пространство. Нам удается облегчить проблему, используя 'template' вместо 'templateUrl' и возвращая html из кеша шаблонов для ускорения загрузки, но я отменю некоторые из этих изменений и повторно протестирую ваш анимированный патч, чтобы увидеть, поможет ли это.

В качестве заключительного замечания я думаю, что есть похожие проблемы с хуками анимации ng-include и ui-view. Это очень сложно определить, но поскольку наше приложение широко использует обе директивы, чистый эффект весьма заметен в IE и в меньшей степени в Chrome (эффект заключается в кратком отображении взаимоисключающих фрагментов dom, т.е. та же проблема, что и у @Narretz. адресовано для ng-hide выше).
Мне удалось улучшить ситуацию, предварительно загрузив наши настраиваемые шаблоны директив и используя 'template' для доступа к ним, а также отреагировав на события load / loaded, запускаемые ng-include и ui-view (используя отображение настраиваемого класса: none! important ', чтобы скрыть соответствующие узлы между событиями load и loaded), но проблема все равно иногда возникала.

Отменив все это и указав класс исключения, установив $ animateProvider.classNameFilter в качестве @Narretz, предполагалось, что проблемы исчезнут.

В настоящее время мы не используем никаких анимаций, но это, вероятно, изменится в ближайшем будущем, мы можем работать с classNameFilter, чтобы активировать нужные нам области.

@Narretz , не уверен, можно ли применить ваше исправление в более общем плане, чтобы охватить сценарии ng-include и ui-view, но симптомы, безусловно, выглядят одинаково.

Исправление является «общим» в том смысле, что оно не в коде директивы ngShow / ngHide, а в самой логике анимации. Однако ngShow / Hide использует определенную функцию анимации (временный класс), которая не используется ngInclude и ngView. Трудно сказать, в чем проблема, не видя примера.

Привет, Наррец,
Некоторое время я пытался исправить эту проблему и нашел здесь этот патч, который после применения устранил проблему для версии 1.5.0.Beta, но все еще не работает с 1.5.8. Спасибо за путь :)

Также в патче я сразу заметил, что используется двойное равенство '==', которое после изменения на '===' работает. Это правильный синтаксис для проверки состояния.

Я также пробовал это в следующих версиях 1.5.9 и 1.6.0, в любом случае это не работает с патчем. Любая помощь будет очень заметна.

Спасибо
Фахад

Я пересмотрю PR @gkalpak после Рождества, и тогда мы, надеюсь, сможем быстро его получить.

Пробовал в следующих версиях, не работает в 1.5.9 и 1.6.1. Любая помощь / предложение будут очень заметны. Спасибо
Фахад

По-прежнему та же проблема с 1.5.10

Была та же проблема, хотел попробовать обновить до 1.6.1 с 1.3.x, и пришлось снова понизить до 1.4.4. Какое неудобство для команды Angular

@ stijn26 , вероятно, вы сделали что-то не так, и это должен быть вопрос о стеке, но в любом случае:

• 1.6 имеет критические изменения по сравнению с 1.X-1.5, пожалуйста, примите во внимание их - вы можете увидеть изменения в журнале изменений на github (попробуйте 1.5 instad)
• Вы обновили все модули? например angular-animate.js в соответствующую ревизию или просто angular.min.js? если не попробуй

Я проверил все критические изменения и доработал их, все модули обновились. У меня была такая же проблема, как и у остальных людей в этой ветке.

@mmomeni @ stijn26 @teterovic
На данный момент мы нашли способ включать и выключать анимацию, и пока она у нас работает нормально. пример ниже. Надеюсь, это поможет и вам, ребята, пока команда не найдет правильное решение ???

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

Я получаю это мерцание с ng-show в angular 1.6.3 в Chrome 57 в Windows 7. Отображение: none в .ng-hide.ng-hide-animate исправляет это для меня.

@ samal84, не могли бы вы предоставить демоверсию? Я не могу воспроизвести это в Chrome 58 с plnkr в первом посте, обновленном до 1.6.4.

Хорошо, это больше похоже на ошибку с угловым материалом md-switch, теперь, когда я попытался сделать минимальную демонстрацию: http://plnkr.co/edit/hR2B8yEPjak0v2Yryid1?p=preview

Попробуйте быстро щелкнуть переключатель, и вы увидите, что включение / выключение внутри и снаружи MD-переключателя ведет себя по-разному. Один внутри мерцает, и оба отображаются на долю секунды, а тот, что снаружи, в порядке.

@ samal84 Это также исправляется отключением $ animate (который использует angular-material). Демо:
http://plnkr.co/edit/C08HPffIBTomH1QoBdRD?p=preview