Angular.js: IE11でng-hideとng-showが短時間同時に表示される

これはおなじみのようです。 問題は、IE11でこれらを確実に再現できないことです。 それは私にとっておそらく30回に1回起こっています。 Firefoxでも一度見たことがあるので、ブラウザがrequestAnimationFrameキューをフラッシュする速度、またはアニメーションが許可されているかどうかを検出するのにかかる時間に関係している可能性があります。

最新のスナップショット（ http://code.angularjs.org/snapshot/angular-animate.js）でテストして、発生頻度が低いかどうかを確認してください。

IE11では、チェックボックスをクリックするたびに両方のフラッシュが表示されます。 リンクされたangular-animateを使用しても、この動作は変わらないようです。

それは変だ。 IEとOSのバージョンは何ですか？ そして、あなたのコンピュータは一般的に遅いですか、それとも負荷がかかっていますか？

私たちはかなりハイエンドのコンピューターを持っています（私はそれらのうちの3つを試しました）、私の最初の推測は実際にはそれが短時間しか見えない何かを表示するのに十分速いということでした。 IEバージョン11.0.9600.18202でWindows8.1を実行しています。 私が試したコンピューターの1つはWindows7で、同じ問題が発生しました。

私は現在、問題を回避するためにこのcssを適用しています：
.ng-hide.ng-hide-animate {
表示：なし！重要;
}

もちろん、一部のng-hideをアニメーション化し、一部をアニメーション化しない場合、これは将来的に問題を引き起こす可能性があります。

うーん、私はコンピューターが速すぎるとは思っていませんでした。 それかもしれません。 IE11の少し新しいバージョン（11.0.9600.18204）もありますが、これが理由ではないかと思います。

私は今、仮想Windows 7のIE11でこれを試しましたが、おそらく2〜10回の試行ごとに1回問題が発生します。 これは、仮想マシンの実行速度が遅いことが原因である可能性がありますが、これは推測にすぎません。

Chromeでもngスイッチを使用して同じ問題が発生しています。 これが発生する特定のケースは、ngModelのビュー値の変更がコミットされた場合です。これは、a）親フォームのng-valid-parseクラスを削除し、b）フォームフィールド（カスタムempty ）のクラスを削除します。 ng-switch反転します（フォームフィールドが無効になるため）。 これは、親アニメーション（a）タスクが最初に実行され、スケジューラーが完了するまで待機してから、フォームフィールド（b）からタスクを実行するように別のフレームを要求し、次に_another_フレームを待機してng-switchアニメーションタスクを実行するために発生します。 （c）、ngスイッチの両方の要素が一時的に表示される1フレームのちらつきを引き起こします。

@plestik plnkr.coなどにデモを投稿できますか？

@Narretz試してみます。 しかし、フレームごとに1つのアニメーショングループしか実行しない場合、これはネストされたアニメーションでも機能するはずですか？

申し訳ありませんが、プランカーで再現することはできません。

@Narretzこの問題を解決するために私にできることはありますか？ 必要に応じて、一貫して再現できるステージング環境のログイン資格情報を提供できます。

編集：構造アニメーションとクラスアニメーションを組み合わせるとちらつきが発生する可能性があると明確に述べられているドキュメントの一部を見逃しました。 それなら、私を気にしないでください。

OS Xを搭載したChromeでも同様の問題が発生しています。私の場合、表示条件が異なる2つのng-showです（同時に発生することはありません）。 2つの条件を次々に切り替えても、両方の要素が表示される瞬間があります。 これはすべてのページ構成で発生するわけではありませんが、特定の1つのケースでほぼ一貫して発生します。

Windows上のChromeでも、angularとangular-animate1.4.12を使用して同じ問題が発生します。

@PhilipWallinソリューションは、今のところ良い回避策です。

iOS9.3用のiOSシミュレーターでも同じ問題が発生しています。 この問題を示すビデオをアップロードしました： https ：

最近、Angularマテリアルを使用して手を汚し、既存のプロジェクトに含めて、ng-if / ng-showを使用しているときにChromeでこのちらつきの動作を経験し始めました。 いくつかの証跡とエラーの後、「ngAnimate」が原因で発生した問題が見つかりました。

@PhilipWallinソリューションは私にとって回避策として機能し、将来何が機能しないか

以下をCSSに追加し、「ng-if」を「ng-show」に置き換えました。
.ng-hide.ng-hide-animate {
表示：なし！重要;
}

PS：AngularおよびngAnimateバージョンv1.5.7を使用

+1

こんにちは、Angular 1.5.8（v 1.12.15からアップグレードしたばかり）で同様の問題が発生しています。

この問題はIE11で非常に明白であり、Chromeでも発生しますが、多くの場合、移行が速すぎて気付かないことがあります。

私が持っているディレクティブは、トランスクルージョンを使用してタブページを含めるタブコントロールです。 私が経験しているちらつき（新しいアクティブなタブページのhtmlを並べて簡単に表示します）は、ユーザーがタブを切り替えたとき（つまり、コンパイルとテンプレートのロード後）です。 このコードは、ブールフラグ付きのng-showを使用して、ページを表示するかどうかを決定します（一度に最大1つがアクティブになります）。
ng-showをng-に置き換えた場合、ちらつきがない場合。

私が使用することを計画していた回避策は、同じng-show条件付きフラグでng-classを使用して、カスタムcssクラス '.myCloak {display：none！important}'（つまり、ng-cloakで使用されるのと同じcss）をアクティブにすることでした。 ）例：
ng-show = "tab.active" ng-class = "{'myCloak'：tab.active}"これは問題を回避します。

デモンストレーション用のプランカーを作成しようとしますが、時間がかかる場合があります。

それまでの間、IE11のアプリに表示される問題のスクリーンショットと、それが取得されたビデオを添付します。

スクリーンショットでは、薄い赤い丸い長方形内の領域に、誤って表示されているタブページと関連するDOM検査が表示されます。 青い角の丸い長方形の領域は、アクティブなタブを強調表示します。このタブも表示されます。

ビデオ[http://take.ms/czZZV]を再生すると、一貫性がないことがわかりますが、頻繁に発生します。

Angular1.5.8のChrome54でも同じ問題が発生します。

@PhilipWallinソリューションは今のところも機能します。

原因が何であるかについて何か考えはありますか？

こんにちは、私はこの振る舞いを示すプランクをまとめることができました：

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

IE11で実行し、タブページを切り替えると、表示されるはずです。 コードは少し醜いですが、問題を示しています。 style.cssでng-hide-animateオーバーライドのコメントを解除すると（ @PhilipWallinの回避策）、問題は解決します。

それでも再現できない場合に備えて、月曜日にこれを整理し、プランクを使用して問題のビデオを投稿します。 お役に立てれば...

私はプランクを少し片付けて説明を追加しました、
https://plnkr.co/edit/l70kaJ
二重レンダリングの動きを明確にするために、それぞれのタブページの周りに青と赤の境界線があります（IE11の下で）

@teterovicが問題＃

@garycuthbert plnkrをありがとう、それは問題を非常によく示しています（IE11で）。 調査して、何かできることがあるかどうかを確認します。
それまでの間、要素で実際にアニメーションを使用しない場合は、classNameFilterを使用して、その要素でアニメーションを無効にすることができます： https ：//code.angularjs.org/snapshot/docs/api/ng/provider/ $ animateProvider＃ classNameFilter

みなさん、こんにちは、
@garycuthbertの例のパッチを作成しました。 この問題の影響を受けるすべての人は、この角度アニメーションファイルでテストし、問題が解決したか、動作が改善された場合に報告してください。 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私はもともとhttps ：

@Narretzに感謝し

他の誰かがテストするのを数日待ちますが、それ以外の場合は来週マージします。 現在、1.5.9のリリース日はありませんので、リリースされると思います。 1.5.9がいつリリースされるかはわかりません...

@Narretzの修正に感謝します。次のリリースに注目します。

まだわかりませんが、この修正は、ディレクティブで見られた別の問題にも役立つと思います。templateUrlを使用するネストされたディレクティブを多数使用し、最新のAngularリリースでは、かなり醜い一時的なものが見られるようになりました。最初のページの読み込みとビューの遷移でのレンダリング。

templateUrlメカニズムが非同期であり、親/子ディレクティブが互いに待機して、この問題に似た一時的なレンダリングをロードできないことを感謝しますが、相互に排他的なdomのチャンクが簡単にレンダリングされます。同じスペース。 'templateUrl'の代わりに 'template'を使用し、テンプレートキャッシュからhtmlを返して読み込みを高速化することで問題を緩和していますが、これらの変更の一部を元に戻し、アニメーションパッチで再テストして問題が解決するかどうかを確認します。

最後の観察として、ng-includeとui-viewアニメーションフックにも同様の問題があると思います。 突き止めることは非常に困難であるが、我々のアプリは広く両方のディレクティブを使用して正味の効果は、IEの下で非常に顕著であるとChromeの下でより少ない程度に（効果、すなわち@Narretzが持っている同じ問題DOMの相互に排他的なチャンクの簡単なレンダリングであるとして、上記のng-hideに対応）。
カスタムディレクティブテンプレートをプリロードし、「template」を使用してそれらにアクセスし、ng-includeとui-viewによって発生したロード/ロードされたイベントに反応することで（カスタムクラスの「display：」を使用して）状況を改善することができました。なし！important 'は、ロードイベントとロードイベントの間で関連するノードをクロークします）が、それでも問題が時々見られました。

これをすべて元に戻し、$ animateProvider.classNameFilterを@Narretzとして設定して除外クラスを指定すると、問題が解消されることが示唆されました。

現在、アニメーションは使用していませんが、近い将来変更される可能性があります。classNameFilterを使用して、必要な領域をアクティブ化できます。

@ Narretz 、ng-includeとui-viewのシナリオをカバーするために修正をより一般的に適用できるかどうかは

修正は、ngShow / ngHideディレクティブコードではなく、アニメーションロジック自体にあるという意味で「一般的」です。 ただし、ngShow / Hideは、ngIncludeおよびngViewでは使用されない特定のアニメーション関数（一時クラス）を使用します。 例を見ずに彼らの問題が何であるかを言うのは難しいです。

こんにちはナレッツ、
私はしばらくの間この問題を修正しようとしていて、適用後にバージョン1.5.0の問題を修正したこのパッチをここで見つけました。ベータ版ですが、1.5.8ではまだ機能しません。 パスをありがとう:)

また、パッチでは、ダブルイコール '=='が使用されていることに気づきましたが、 '==='に変更すると機能します。 条件チェックの正しい構文はどれですか。

私はこれをさらにバージョン1.5.9と1.6.0で試しましたが、とにかくパッチではまだ機能していません。 どんな助けでも非常に高く評価されます。

ありがとう
ファハド

クリスマス後に@gkalpakのPRをレビューします。

1.5.9および1.6.1で機能しない他のバージョンで試してみました。 どんな助け/提案も非常に高く評価されます。 ありがとう
ファハド

1.5.10でも同じ問題

同じ問題があり、1.3.xから1.6.1にアップグレードしようとし、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);
        });

Windows7のChrome57の角度1.6.3でng-showを使用すると、このちらつきが発生します。ディスプレイ：.ng-hide.ng-hide-animateのなしで修正されます。

@ samal84デモを提供していただけますか？ 最初の投稿のplnkrが1.6.4に更新されているため、Chrome58でこれを再現することはできません。

最小限のデモを作成しようとしたので、角度のあるマテリアルmd-switchのバグのように見えます： http ：

スイッチをすばやくクリックしてみてください。mdスイッチの内側と外側のオン/オフの動作が異なることがわかります。 内側の1つはちらつき、両方が一瞬レンダリングされますが、外側の1つは問題ありません。

@ samal84これは、$ animate（angular-materialが使用する）を無効にすることでも修正されます。 デモ：
http://plnkr.co/edit/C08HPffIBTomH1QoBdRD?p=preview