Angular.js: ng-hide dan ng-show ditampilkan secara bersamaan untuk waktu yang singkat di IE11

Ini terdengar familiar. Masalahnya adalah saya tidak pernah dapat mereproduksi ini dengan andal di IE11. Itu telah terjadi mungkin sekali dalam 30 kali bagi saya. Saya juga pernah melihatnya sekali di Firefox, jadi mungkin ada hubungannya dengan seberapa cepat browser menghapus antrean requestAnimationFrame, atau dengan berapa lama waktu yang kami butuhkan untuk mendeteksi apakah animasi diizinkan.

Bisakah Anda menguji dengan snapshot terbaru: http://code.angularjs.org/snapshot/angular-animate.js dan melihat apakah itu lebih jarang terjadi?

Di IE11 saya, saya mendapatkan flash dari keduanya yang ditampilkan setiap kali saya mengklik kotak centang. Menggunakan animasi sudut terkait tampaknya tidak mengubah perilaku ini.

Itu aneh. Versi IE dan OS apa yang Anda miliki? Dan apakah komputer Anda umumnya lambat atau sedang memuat?

Kami memiliki komputer yang cukup canggih (saya mencoba tiga di antaranya), perkiraan awal saya sebenarnya cukup cepat untuk menampilkan sesuatu yang hanya terlihat dalam waktu singkat. Saya menjalankan Windows 8.1 dengan versi IE 11.0.9600.18202. Salah satu komputer yang saya coba adalah Windows 7, menunjukkan masalah yang sama.

Saat ini saya menerapkan css ini untuk menghindari masalah:
.ng-hide.ng-hide-animate {
display: none! important;
}

Hal ini tentu saja dapat menimbulkan masalah bagi kami di masa mendatang jika kami ingin menghidupkan beberapa ng-hide dan tidak menghidupkan beberapa.

Hm, saya tidak berpikir tentang komputer itu terlalu cepat. Mungkin itu saja. Saya juga memiliki versi IE11 yang sedikit lebih baru (11.0.9600.18204), tetapi saya ragu bahwa ini adalah alasannya.

Saya mencoba ini sekarang di IE11 pada Windows 7 virtual saya, dan mengalami masalah mungkin sekali setiap 2-10 kali mencoba. Ini mungkin karena mesin virtual saya berjalan lebih lambat, tetapi ini hanya tebakan.

Saya mengalami masalah yang sama di Chrome, dengan sakelar ng. Kasus spesifik di mana hal itu terjadi adalah ketika perubahan nilai tampilan dalam ngModel dilakukan, yang a) menghapus kelas ng-valid-parse pada formulir induk, b) menghapus kelas pada bidang formulir (kustom empty class) dan b) membalik ng-switch (karena kolom formulir kemudian dinonaktifkan). Ini terjadi karena animasi induk (a) tugas dijalankan terlebih dahulu, dan penjadwal menunggu hingga selesai, lalu meminta bingkai lain untuk menjalankan tugas dari bidang formulir (b), lalu menunggu _another_ frame untuk menjalankan tugas animasi ng-switch (c), menyebabkan flicker pada satu frame di mana kedua elemen dalam sakelar-ng ditampilkan untuk sementara.

@plestik dapatkah Anda memposting demo di plnkr.co atau serupa?

@Narretz saya akan mencobanya. Tetapi apakah ini bahkan seharusnya berfungsi dengan animasi bersarang jika hanya menjalankan satu grup animasi setiap frame?

Maaf, tidak dapat mereproduksinya di Plunkr.

@Narretz adakah yang bisa saya lakukan untuk membantu menyelesaikan masalah ini? Jika Anda mau, saya dapat memberi Anda kredensial login untuk lingkungan pementasan kami di mana saya dapat mereproduksinya secara konsisten.

Sunting: Saya melewatkan bagian dari dokumen yang cukup jelas mengatakan bahwa menggabungkan animasi struktural dengan animasi kelas dapat menyebabkan kedipan. Lupakan aku, kalau begitu.

Saya mengalami masalah serupa di Chrome dengan OS X. Dalam kasus saya, ini adalah dua ng-show dengan kondisi tampilan berbeda (yang tidak pernah benar pada saat yang sama). Bahkan jika saya mengganti kedua kondisi segera setelah satu sama lain, ada momen singkat di mana kedua elemen terlihat. Ini tidak terjadi di semua konfigurasi halaman, tetapi terjadi cukup konsisten dalam satu kasus tertentu.

Saya juga memiliki masalah yang sama di Chrome pada Windows, menggunakan angular dan angular-animate 1.4.12.

Solusi @PhilipWallin adalah solusi yang bagus untuk saat ini.

Saya mengalami masalah yang sama di iOS Simulator untuk iOS 9.3. Saya telah mengupload video yang mendemonstrasikan masalah tersebut: https://youtu.be/C0Lh5B1Lj6k

Saya baru-baru ini mengotori tangan saya menggunakan materi Angular dan termasuk dalam proyek saya yang sudah ada dan mulai mengalami perilaku berkedip-kedip ini di Chrome saat menggunakan ng-if / ng-show. Setelah beberapa jejak dan kesalahan ditemukan masalah yang disebabkan karena "ngAnimate".

Solusi @PhilipWallin berfungsi sebagai solusi bagi saya dan tidak yakin apa yang tidak akan berhasil di masa mendatang.

Baru saja menambahkan di bawah ini di CSS saya dan mengganti "ng-if" saya menjadi "ng-show"
.ng-hide.ng-hide-animate {
display: none! important;
}

PS: menggunakan Angular dan versi ngAnimate v1.5.7

+1

Hai, saya mengalami masalah serupa dengan angular 1.5.8 (baru saja memutakhirkan dari v 1.12.15).

Masalahnya sangat jelas di bawah IE11, itu juga ada di Chrome tetapi lebih sering daripada tidak transisi terlalu cepat untuk diperhatikan.

Arahan yang saya miliki adalah kontrol tab yang menggunakan transclusion untuk memasukkan halaman tab. Flicker yang saya alami (yang secara singkat menunjukkan html halaman tab aktif baru dan lama berdampingan) adalah ketika pengguna beralih di antara tab (yaitu setelah kompilasi dan pemuatan template). Kode menggunakan ng-show dengan flag boolean untuk memutuskan apakah akan menampilkan halaman atau tidak (maksimal 1 aktif pada satu waktu).
Jika saya mengganti ng-show dengan ng-jika tidak ada flicker.

Pekerjaan sekitar yang telah saya rencanakan untuk digunakan adalah menggunakan ng-class dengan flag bersyarat ng-show yang sama untuk mengaktifkan kelas css kustom '.myCloak {display: none! Important}' (yaitu css yang sama yang digunakan oleh ng-cloak ) mis
ng-show = "tab.active" ng-class = "{'myCloak': tab.active}" yang mengatasi masalah tersebut.

Saya akan mencoba membuat plunkr untuk didemonstrasikan tetapi mungkin perlu beberapa saat.

Sementara itu, saya akan melampirkan tangkapan layar dari masalah tersebut seperti yang muncul di aplikasi kami di bawah IE11 dan dari mana video itu diambil.

Pada tangkapan layar, area di dalam persegi panjang bulat merah tipis menunjukkan halaman tab yang salah ditampilkan dan pemeriksaan DOM yang relevan. Area persegi panjang bulat biru menyorot tab aktif yang juga ditampilkan.

Dengan memutar video [http://take.ms/czZZV] Anda akan melihat bahwa itu tidak konsisten tetapi itu sering terjadi.

Saya memiliki masalah yang sama di chrome 54 dengan Angular 1.5.8.

Solusi @PhilipWallin berfungsi untuk saat ini juga.

Tahu apa penyebabnya?

Halo, saya telah berhasil mengumpulkan potongan yang menunjukkan perilaku ini:

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

Jika Anda menjalankannya di bawah IE11 dan beralih di antara halaman tab, Anda akan melihatnya. Kode ini agak jelek tetapi menunjukkan masalahnya. Jika Anda menghapus komentar ng-hide-animate override di style.css ( @PhilipWallin mengatasi masalah), masalahnya akan hilang.

Saya akan merapikan ini pada hari Senin dan memposting video masalah menggunakan plunk jika Anda masih tidak dapat mereproduksi. Semoga ini membantu...

Saya telah merapikan sedikit dan menambahkan deskripsi,
https://plnkr.co/edit/l70kaJ
ada batas biru dan merah di sekitar halaman tab masing-masing untuk membuat perenderan ganda terlihat jelas (di bawah IE11)

Seperti yang ditemukan @teterovic di edisi # 13974, perilaku ini tampaknya diperkenalkan di versi 1.4.5. Jika Anda mengubah versi angular dan angular-animate pada plunk menjadi 1.4.4 perilakunya tidak ada, naik ke 1.4.5 dan muncul.

@garycuthbert Terima kasih atas plnkr tersebut, ini menunjukkan masalah dengan sangat baik (di IE11). Saya akan menyelidiki dan melihat apakah ada yang bisa kami lakukan.
Sementara itu, jika Anda tidak benar-benar menggunakan animasi pada elemen, Anda dapat menggunakan classNameFilter untuk menonaktifkan animasi pada elemen tersebut: https://code.angularjs.org/snapshot/docs/api/ng/provider/ $ animateProvider # classNameFilter

Halo semuanya,
Saya telah membuat tambalan untuk contoh @garycuthbert . Dapatkah semua orang yang terpengaruh oleh masalah ini, harap uji dengan file animasi bersudut ini dan laporkan kembali jika masalah hilang atau perilakunya diperbaiki? https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

Hai, saya mungkin salah menerapkan tambalan tetapi saya mendapatkan kesalahan berikut menggunakan file ini:

Saya telah mencoba mengganti konten file angular-animate.js sebelumnya serta secara eksplisit memuat file angular-animate-patch.js, mengeluh tentang 'penyedia tidak dikenal' $$ isDocumentHiddenProvider ''. Saya menjalankan rilis 1.5.8, apakah saya melewatkan sesuatu?

Hai @garycuthbert Saya awalnya telah menautkan file yang ditambal untuk master sudut. Ini untuk cabang 1.5: https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

Terima kasih @Narretz , saya telah mencoba tambalan Anda dan ini menyelesaikan masalah untuk saya di bawah IE11, apakah perbaikan ini kemungkinan besar akan

Saya akan menunggu beberapa hari untuk diuji oleh orang lain, tetapi jika tidak, saya akan menggabungkannya minggu depan. Saat ini kami tidak memiliki tanggal rilis untuk 1.5.9, jadi saya pikir itu akan berhasil. Saya tidak bisa mengatakan kapan 1.5.9 akan dirilis ...

Hebat, terima kasih atas perbaikan @Narretz, saya akan

Saya belum bisa memastikannya tetapi saya pikir perbaikan ini juga dapat membantu masalah lain yang kami lihat dengan arahan kami, kami menggunakan banyak arahan bersarang yang menggunakan templateUrl dan, dengan rilis sudut terbaru, kami mulai melihat beberapa transien yang cukup jelek rendering pada pemuatan halaman awal & transisi tampilan.

Meskipun saya menghargai (lebih sekarang) bahwa mekanisme templateUrl adalah asinkron dan arahan orang tua / anak tidak dapat menunggu satu sama lain untuk memuat jenis rendering sementara yang kami lihat tampak mirip dengan masalah ini yaitu potongan dom yang saling eksklusif sedang diberikan secara singkat di ruang yang sama. Kami mengelola untuk meringankan masalah dengan menggunakan 'template' daripada 'templateUrl' dan mengembalikan html dari cache template untuk mempercepat pemuatan tetapi saya akan membatalkan beberapa perubahan ini dan menguji ulang dengan tambalan animasi Anda untuk melihat apakah itu membantu.

Sebagai pengamatan terakhir, saya pikir ada masalah serupa dengan hook animasi ng-include dan ui-view. Sangat sulit untuk dijabarkan tetapi karena aplikasi kami menggunakan kedua arahan secara ekstensif, efek bersihnya cukup terlihat di bawah IE dan pada tingkat yang lebih rendah di bawah Chrome (efeknya adalah rendering singkat dari potongan dom yang saling eksklusif yaitu masalah yang sama yang dimiliki @Narretz ditujukan untuk ng-hide di atas).
Saya dapat memperbaiki situasi dengan melakukan pramuat template direktif kustom kami dan menggunakan 'template' untuk mengaksesnya dan dengan bereaksi terhadap peristiwa muat / muat yang dipicu oleh ng-include dan ui-view (menggunakan tampilan kelas khusus: none! important 'untuk menyelubungi node yang relevan antara peristiwa pemuatan dan yang dimuat) tetapi masalah tersebut kadang-kadang masih terlihat.

Setelah membatalkan semua ini dan dengan menentukan kelas pengecualian dengan menyetel $ animateProvider.classNameFilter sebagai @Narretz menyarankan agar masalah menghilang.

Kami saat ini tidak menggunakan animasi apa pun tetapi ini kemungkinan akan berubah dalam waktu dekat, kami dapat bekerja dengan classNameFilter untuk mengaktifkan area yang kami butuhkan.

@Narretz , tidak yakin apakah perbaikan Anda dapat diterapkan secara lebih umum untuk mencakup skenario ng-include & ui-view tetapi gejalanya pasti terlihat sama.

Perbaikannya adalah "umum" dalam arti bahwa ini bukan dalam kode direktif ngShow / ngHide, tetapi dalam logika animasinya sendiri. Namun, ngShow / Hide menggunakan fungsi animasi tertentu (kelas sementara), yang tidak digunakan oleh ngInclude dan ngView. Sulit untuk mengatakan apa masalahnya dengan mereka tanpa melihat contoh.

Hai Narretz,
Saya telah mencoba memperbaiki masalah ini dari beberapa waktu dan menemukan tambalan ini di sini yang setelah diterapkan telah memperbaiki masalah untuk versi 1.5.0.Beta, tetapi masih tidak berfungsi dengan 1.5.8. Terima kasih untuk jalannya :)

Juga di tambalan saya perhatikan sekaligus ganda sama '==' telah digunakan di mana setelah mengubahnya menjadi '===' itu berfungsi. Sintaks mana yang benar untuk pemeriksaan kondisi.

Saya juga telah mencoba ini di versi 1.5.9 dan 1.6.0 lebih lanjut, toh masih tidak berfungsi dengan tambalan. Bantuan apa pun akan sangat berarti.

Terima kasih
Fahad

Saya akan mereview PR

Mencoba di versi lebih lanjut tidak bekerja di 1.5.9 dan 1.6.1. Bantuan / saran apa pun akan sangat dihargai. Terima kasih
Fahad

Masih masalah yang sama dengan 1.5.10

Punya masalah yang sama, ingin mencoba mengupgrade ke 1.6.1 dari 1.3.x dan harus downgrade lagi ke 1.4.4. Sungguh memalukan bagi tim Angular

@ stijn26 Anda mungkin melakukan sesuatu yang salah dan ini seharusnya menjadi pertanyaan stackoverflow tetapi bagaimanapun juga:

• 1.6 memiliki perubahan yang melanggar jika dibandingkan dengan 1.X-1.5, harap pertimbangkan - Anda dapat melihat perubahan di changelog di github (coba 1.5 instad)
• Apakah Anda memperbarui semua modul? seperti angular-animate.js ke revisi yang sesuai atau hanya angular.min.js? jika tidak mencobanya

Saya memeriksa semua perubahan yang melanggar dan memodifikasinya, semua modul diperbarui. Saya memiliki masalah yang sama persis dengan orang-orang lain di utas ini.

@mmomeni @ stijn26 @teterovic
Untuk saat ini, kami menemukan pekerjaan untuk menghidupkan dan mematikan animasi & sejauh ini berfungsi dengan baik untuk kami. contohnya di bawah ini. Semoga ini dapat membantu kalian juga sampai tim menemukan perbaikan yang tepat ???

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

Saya mendapatkan flicker ini dengan ng-show di angular 1.6.3 di Chrome 57 pada Windows 7. Tampilan: tidak ada di .ng-hide.ng-hide-animate memperbaikinya untuk saya.

@ samal84 dapatkah Anda memberikan demo? Saya tidak dapat mereproduksi ini di Chrome 58 dengan plnkr di posting pertama diperbarui ke 1.6.4.

Ok itu lebih mirip bug dengan material sudut md-switch, sekarang saya mencoba membuat demo minimal: http://plnkr.co/edit/hR2B8yEPjak0v2Yryid1?p=preview

Coba klik sakelar dengan cepat, dan Anda akan melihat bahwa on / off di dalam dan di luar md-switch berperilaku berbeda. Yang di dalam berkedip dengan keduanya di-render selama sepersekian detik, sedangkan yang di luar baik-baik saja.

@ samal84 Itu juga diperbaiki dengan menonaktifkan $ animate (yang menggunakan material sudut). Demo:
http://plnkr.co/edit/C08HPffIBTomH1QoBdRD?p=preview