Angular.js: IE11 में थोड़े समय के लिए एक ही समय में एनजी-छिपाना और एनजी-शो दिखाना

यह परिचित लगता है। समस्या यह है कि मैं कभी भी IE11 में इनका पुनरुत्पादन नहीं कर सकता। यह मेरे लिए 30 बार में शायद एक बार हुआ है। मैंने इसे एक बार फ़ायरफ़ॉक्स पर भी देखा है, इसलिए हो सकता है कि यह करने के लिए कुछ हो कि ब्राउज़र ने कितनी तेज़ी से रिक्वेस्ट की।

क्या आप नवीनतम स्नैपशॉट के साथ परीक्षण कर सकते हैं: http://code.angularjs.org/snapshot/angular-animate.js और देखें कि क्या यह कम बार होता है?

मेरे IE11 में मुझे हर बार जब मैं चेकबॉक्स पर क्लिक करता हूँ तो दोनों को फ्लैश मिलता है। लिंक किए गए कोणीय-चेतन का उपयोग करने से यह व्यवहार परिवर्तित नहीं हुआ।

वह अजीब है। आपके पास क्या IE और OS संस्करण है? और क्या आपका कंप्यूटर आमतौर पर धीमा या लोड के तहत है?

हमारे पास काफी उच्च-अंत वाले कंप्यूटर हैं (मैंने उनमें से तीन पर कोशिश की), मेरा प्रारंभिक अनुमान वास्तव में था कि यह तेजी से कुछ दिखाने के लिए पर्याप्त था जो केवल थोड़े समय के लिए दिखाई देता है। मैं IE संस्करण 11.0.9600.18202 के साथ विंडोज 8.1 चला रहा हूं। मैंने जिन कंप्यूटरों पर कोशिश की थी, उनमें से एक विंडोज 7 था, उसी समस्या को दर्शाता है।

मैं वर्तमान में इस सीएसएस को समस्या से बचने के लिए आवेदन कर रहा हूं:
.ng-hide.ng- छिपाना-चेतन {
प्रदर्शन: कोई नहीं;
}

यह निश्चित रूप से भविष्य में हमारे लिए समस्याएँ पैदा कर सकता है यदि हम कुछ एनजी-छिपाना चाहते हैं और कुछ को चेतन नहीं करना चाहते हैं।

हम्म, मैं कंप्यूटर के बारे में बहुत तेज़ होने के बारे में नहीं सोचता था। यह हो सकता है। मेरे पास IE11 (11.0.9600.18204) का थोड़ा नया संस्करण भी है, लेकिन मुझे संदेह है कि यही कारण है।

मैंने अपने वर्चुअल विंडोज 7 पर IE11 में अब यह कोशिश की, और हर 2-10 बार कोशिश करने पर समस्या का अनुभव हो सकता है। यह हो सकता है क्योंकि मेरी वर्चुअल मशीन धीमी चल रही है, लेकिन यह केवल एक अनुमान है।

मुझे Chrome में समान समस्या हो रही है, w / एक एनजी-स्विच। विशिष्ट मामला जहां ऐसा होता है जब ngModel में एक दृश्य मान परिवर्तन होता है, जो कि a) मूल रूप पर ng-valid-parse वर्ग निकालता है, b) प्रपत्र फ़ील्ड पर एक वर्ग निकालता है (एक कस्टम empty वर्ग) और बी) ng-switch फ़्लिप करता है (क्योंकि फॉर्म फ़ील्ड तब अक्षम होता है)। ऐसा इसलिए होता है क्योंकि पैरेंट एनीमेशन (a) कार्य पहले चलता है, और शेड्यूलर के पूरा होने तक प्रतीक्षा करता है, फिर फॉर्म फ़ील्ड (b) से कार्य को चलाने के लिए किसी अन्य फ़्रेम का अनुरोध करता है, फिर ng- स्विच एनीमेशन कार्य को चलाने के लिए _another_ फ्रेम का इंतजार करता है (c), एक फ्रेम के झिलमिलाहट का कारण जहां एनजी-स्विच में दोनों तत्व अस्थायी रूप से प्रदर्शित होते हैं।

@plestik क्या आप plnkr.co या इसी तरह का कोई डेमो

@Narretz मैं इसे एक शॉट दूँगा। लेकिन क्या यह भी w / नेस्टेड एनिमेशन का काम करने वाला है अगर यह केवल हर फ्रेम में एनिमेशन का एक समूह चलाता है?

क्षमा करें, इसे प्लंकर में पुन: पेश नहीं किया जा सकता है।

@Narretz इस समस्या को हल करने में मदद करने के लिए मैं कुछ भी कर सकता हूं? यदि आप चाहते हैं, तो मैं आपको हमारे मंचन के माहौल के लिए w / लॉगिन क्रेडेंशियल्स प्रदान कर सकता हूं जहां मैं इसे लगातार पुन: पेश कर सकता हूं।

संपादित करें: मैंने डॉक्स के उस हिस्से को याद किया जहां यह स्पष्ट रूप से कहता है कि संरचनात्मक एनिमेशन w / वर्ग एनिमेशन के संयोजन से झिलमिलाहट हो सकती है। कभी मन करता है तो कभी।

मैं ओएस एक्स के साथ क्रोम पर समान मुद्दों का अनुभव कर रहा हूं। मेरे मामले में यह दो एनजी-शो है जिसमें अलग-अलग प्रदर्शन स्थितियां हैं (जो एक ही समय में कभी भी सच नहीं हैं)। यहां तक ​​कि अगर मैं दो स्थितियों को एक दूसरे के तुरंत बाद टॉगल करता हूं, तो एक संक्षिप्त क्षण है जहां दोनों तत्व दिखाई देते हैं। यह सभी पेज कॉन्फ़िगरेशन में नहीं होता है, लेकिन एक विशेष मामले में लगातार होता है।

मुझे विंडोज पर क्रोम में भी वही मुद्दा है, जो कि कोणीय और कोणीय 1.4.12 का उपयोग कर रहा है।

@PhilipWallin समाधान अब के लिए एक अच्छा समाधान है।

मैं iOS 9.3 के लिए iOS सिम्युलेटर में एक ही समस्या का सामना कर रहा हूं। मैंने इस मुद्दे को प्रदर्शित करते हुए एक वीडियो अपलोड किया है: https://youtu.be/C0Lh5B1Lj6k

मैंने हाल ही में अपने हाथों को कोणीय सामग्री का उपयोग करके गंदा कर लिया और अपने मौजूदा प्रोजेक्ट में शामिल किया और एनजी-इफ / एनजी-शो का उपयोग करते हुए क्रोम में इस चंचल व्यवहार का अनुभव करना शुरू कर दिया। कुछ निशान और त्रुटि के बाद "ngAnimate" के कारण समस्या पाई गई।

@PhilipWallin समाधान मेरे लिए एक समाधान के रूप में काम करता है और यह सुनिश्चित नहीं करता है कि भविष्य में क्या काम नहीं करेगा।

बस अपने सीएसएस में नीचे जोड़ा और मेरे "एनजी-अगर" को "एनजी-शो" में बदल दिया
.ng-hide.ng- छिपाना-चेतन {
प्रदर्शन: कोई नहीं;
}

पुनश्च: कोणीय और अस्पष्ट संस्करण v1.5.7 का उपयोग करना

+1

नमस्ते, मैं कोणीय 1.5.8 के साथ एक समान समस्या का सामना कर रहा हूं (केवल v 1.12.15 से उन्नत किया गया है)।

समस्या IE11 के तहत बहुत स्पष्ट है, यह क्रोम के तहत भी है लेकिन अधिक बार नहीं की तुलना में संक्रमण बहुत तेजी से नोटिस किया जाता है।

मेरे पास निर्देश एक टैब नियंत्रण है जो टैब पृष्ठों को शामिल करने के लिए ट्रांसकॉक्शन का उपयोग करता है। झिलमिलाहट मैं अनुभव कर रहा हूँ (जो संक्षेप में नए और पुराने सक्रिय टैब पृष्ठ html अगल-बगल दिखाता है) है, जब उपयोगकर्ता टैब (संकलन और टेम्पलेट लोड होने के बाद) के बीच स्विच करता है। कोड बूलियन ध्वज के साथ एनजी-शो का उपयोग करता है ताकि यह तय किया जा सके कि पृष्ठ प्रदर्शित नहीं किया गया है (जिसमें अधिकतम 1 किसी भी समय सक्रिय है)।
अगर मैं एनजी-शो को एनजी से बदल देता हूं-अगर कोई झिलमिलाहट नहीं है।

मेरे आस-पास के काम का उपयोग करने की योजना बना रहा था, कस्टम टॉस वर्ग को सक्रिय करने के लिए उसी एनजी-शो सशर्त ध्वज के साथ एनजी-क्लास का उपयोग करना था। ) उदा
ng-show = "tab.active" ng-class = "{'myCloak': tab.active}" जो समस्या के आसपास काम करता है।

मैं प्रदर्शित करने के लिए एक प्लंकर बनाने का प्रयास करूंगा लेकिन इसमें थोड़ा समय लग सकता है।

इस बीच मैं समस्या का एक स्क्रीन शॉट संलग्न करूंगा क्योंकि यह IE11 के तहत हमारे ऐप में दिखाई देता है और जिस वीडियो से इसे लिया गया था।

स्क्रीन पर पतली लाल गोल आयतों के भीतर के क्षेत्र को गोली मार दी टैब पृष्ठ दिखाते हैं जो गलत तरीके से प्रदर्शित किया जा रहा है और प्रासंगिक DOM निरीक्षण। नीला गोल आयताकार क्षेत्र सक्रिय टैब को उजागर करता है जिसे दिखाया भी जाता है।

[Http://take.ms/czZZV] वीडियो चलाकर आप देखेंगे कि यह सुसंगत नहीं है, लेकिन ऐसा अक्सर होता है।

मेरे पास क्रोम 54.5 के साथ क्रोम 54 पर एक ही मुद्दा है।

@PhilipWallin समाधान अभी के लिए भी काम करता है।

किसी भी विचार का कारण क्या हो सकता है?

नमस्कार, मैं इस व्यवहार को दिखाते हुए एक साथ रखने में कामयाब रहा:

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

यदि आप इसे IE11 के तहत चलाते हैं और टैब पृष्ठों के बीच स्विच करते हैं, तो आपको इसे देखना चाहिए। कोड थोड़ा बदसूरत है लेकिन यह समस्या को दर्शाता है। यदि आप style.css में एनजी- हाईड -चेतन ओवरराइड को @PhilipWallin काम करते हैं) तो समस्या दूर हो जाती है।

मैं इसे सोमवार को साफ कर दूँगा और समस्या का एक वीडियो पोस्ट करूँगा जिसमें आप अभी भी पुन: पेश नहीं कर सकते। उम्मीद है की यह मदद करेगा...

मैंने प्लंक को थोड़ा सा बाँध दिया है और एक विवरण जोड़ा है,
https://plnkr.co/edit/l70kaJ
संबंधित टैब पृष्ठों के चारों ओर नीली और लाल सीमाएँ हैं, जिससे डबल रेंडरिंग को स्पष्ट किया जा सके (IE11 के तहत)

जैसा कि @teterovic ने # 13974 के अंक में पाया है कि यह व्यवहार 1.4.5 संस्करण में पेश किया गया है। यदि आप प्लंक पर कोणीय और कोणीय चेतन संस्करणों को 1.4.4 में बदलते हैं तो व्यवहार 1.4.5 तक नहीं है और यह प्रकट होता है।

@garycuthbert plnkr के लिए धन्यवाद, यह मुद्दे को बहुत अच्छी तरह से दिखाता है (IE11 में)। मैं जांच करूंगा और देखूंगा कि क्या हम कुछ कर सकते हैं।
इस बीच, यदि आप वास्तव में तत्वों पर एनिमेशन का उपयोग नहीं करते हैं, तो आप उस तत्व पर एनिमेशन को अक्षम करने के लिए ClassNameFilter कर सकते हैं: https://code.angularjs.org/snapshot/docs/api/ng/proplider/ $ animateProvider # classNameFilter

सभी को नमस्कार,
मैंने @garycuthbert के उदाहरण के लिए एक पैच बनाया है। क्या इस समस्या से प्रभावित हर कोई इस कोणीय चेतन फ़ाइल के साथ परीक्षण कर सकता है और समस्या दूर होने या व्यवहार में सुधार होने पर वापस रिपोर्ट कर सकता है? https://rawgit.com/Narretz/angularjs-plunks/master/nganimate-ie-flicker-14015-2/angular-animate-patch-1.5.x.js

नमस्ते, मैं गलत तरीके से पैच लागू कर सकता हूं लेकिन मुझे इस फ़ाइल का उपयोग करके निम्न त्रुटि मिल रही है:

मैंने पिछले कोणीय-चेतन.जेएस फ़ाइल की सामग्री को बदलने की कोशिश की है और साथ ही कोणीय-चेतन-पैच.जेएस फ़ाइल को स्पष्ट रूप से लोड करके 'अज्ञात प्रदाता' $$ isDocumentHiddenProvider '' के बारे में शिकायत की है। मैं 1.5.8 रिलीज के खिलाफ चल रहा हूं, क्या मुझे कुछ याद आ रहा है?

हाय @garycuthbert मैंने मूल रूप से कोणीय मास्टर के लिए पैच फ़ाइल को लिंक किया था। यहाँ 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 कब जारी किया जाएगा ...

महान, फिक्स @Nretretz के लिए धन्यवाद, मैं अगली रिलीज़ के लिए नज़र रखूँगा।

मुझे अभी तक यकीन नहीं हो रहा है, लेकिन मुझे लगता है कि यह फिक्स हमारे निर्देशों के साथ एक और मुद्दे को देखने में मदद कर सकता है, हम बहुत से नेस्टेड निर्देशों का उपयोग करते हैं जो टेम्पलेट यूआरएल का उपयोग करते हैं और, नवीनतम कोणीय रिलीज के साथ, हमने कुछ काफी बदसूरत क्षणिक देखना शुरू कर दिया है प्रारंभिक पृष्ठ भार और दृश्य संक्रमण पर प्रतिपादन।

यद्यपि मैं सराहना करता हूं (अब और अधिक) कि टेम्प्लेट यूआरएल तंत्र अतुल्यकालिक है और माता-पिता / बच्चे के निर्देश एक-दूसरे पर इंतजार नहीं कर सकते हैं ताकि हम जिस प्रकार के क्षणिक प्रतिपादन को देख रहे हैं वह इस मुद्दे के समान हो। एक ही जगह। हम 'टेम्प्लेट' के बजाय 'टेम्प्लेट' का उपयोग करके और लोड को तेज करने के लिए टेम्प्लेट कैशे से html वापस करके समस्या को कम करने के लिए प्रबंधन कर रहे हैं, लेकिन मैं इनमें से कुछ परिवर्तनों को पूर्ववत कर दूंगा और अपने चेतन पैच के साथ यह देखने में मदद करूंगा कि क्या यह मदद करता है।

अंतिम अवलोकन के रूप में मुझे लगता है कि एनजी-शामिल और यूआई-व्यू एनीमेशन हुक के साथ समान समस्याएं हैं। इसे पिन करना बहुत मुश्किल है, लेकिन जैसा कि हमारे ऐप दोनों निर्देशों का बड़े पैमाने पर उपयोग करता है, शुद्ध प्रभाव IE के तहत काफी ध्यान देने योग्य है और क्रोम के तहत कुछ हद तक (प्रभाव डोम के पारस्परिक रूप से अनन्य विखंडू का संक्षिप्त प्रतिपादन है) एक ही मुद्दा @Nretretz है एनजी-छिपाने के लिए संबोधित किया गया)।
मैं अपने कस्टम डाइरेक्टिव टेम्प्लेट्स को प्री-लोड करके और उन्हें एक्सेस करने के लिए 'टेम्प्लेट' का उपयोग करके और एनजी-शामिल और यूआई-व्यू (एक कस्टम क्लास 'डिस्प्ले का उपयोग करके लोड / लोड की गई घटनाओं पर प्रतिक्रिया करके) स्थिति को सुधारने में सक्षम था। कोई नहीं! महत्वपूर्ण 'लोड और भरी हुई घटनाओं के बीच प्रासंगिक नोड्स को समेटने के लिए) लेकिन समस्या अभी भी कभी-कभी देखी गई थी।

यह सब पूर्ववत और $ animateProvider.classNameFilter सेटिंग के रूप में @Narretz सुझाव समस्याओं गायब द्वारा एक अपवर्जन वर्ग निर्दिष्ट करने के द्वारा करने के बाद।

हम वर्तमान में किसी भी एनिमेशन का उपयोग नहीं करते हैं, लेकिन निकट भविष्य में इसमें बदलाव होने की संभावना है, हम उन क्षेत्रों को सक्रिय करने के लिए ClassNameFilter के साथ काम कर सकते हैं, जिनकी हमें आवश्यकता है।

@Narretz , निश्चित नहीं है कि आपके फिक्स को एनजी-इन और यूआई-व्यू परिदृश्यों को कवर करने के लिए अधिक सामान्यतः लागू किया जा सकता है, लेकिन लक्षण निश्चित रूप से समान दिखते हैं।

फिक्स "सामान्य" है इस अर्थ में कि यह ngShow / ngHide डायरेक्टिव कोड में नहीं है, बल्कि एनीमेशन लॉजिक में ही है। हालाँकि, ngShow / Hide एक विशिष्ट एनीमेशन फ़ंक्शन (एक अस्थायी वर्ग) का उपयोग करता है, जो ngInclude और ngView द्वारा उपयोग नहीं किया जाता है। एक उदाहरण देखे बिना यह कहना मुश्किल है कि उनके साथ क्या समस्या है।

हाय नरेट्ज़,
मैं थोड़ी देर से इस मुद्दे को ठीक करने की कोशिश कर रहा हूं और इस पैच को यहां पाया गया है, जिसे लागू करने के बाद संस्करण 1.5.0 के लिए समस्या को ठीक कर दिया गया है। फिर भी कुछ करें, लेकिन अभी भी 1.5.8 के साथ काम नहीं कर रहा है। मार्ग के लिए धन्यवाद :)

इसके अलावा पैच में मैंने एक बार दोहरे बराबर '==' का इस्तेमाल किया है, जहां इसे '===' में बदलने के बाद यह काम करता है। जो हालत की जाँच के लिए सही वाक्यविन्यास है।

मैंने आगे के संस्करण 1.5.9 और 1.6.0 में भी यह कोशिश की है, यह अभी भी वैसे भी पैच के साथ काम नहीं कर रहा है। कोई भी मदद अत्यधिक प्रशंसनीय होगी।

धन्यवाद
फहद

मैं क्रिसमस के बाद @gkalpak के पीआर की समीक्षा

1.5.9 और 1.6.1 में आगे के संस्करणों में काम नहीं किया। कोई मदद / सुझाव अत्यधिक प्रशंसनीय होगा। धन्यवाद
फहद

अभी भी 1.5.10 के साथ एक ही मुद्दा है

एक ही मुद्दा था, 1.3.x से 1.6.1 में अपग्रेड करने की कोशिश करना चाहता था और उसे फिर से 1.4.4 पर अपग्रेड करना पड़ा। क्या कोणीय टीम के लिए एक शर्मिंदगी है

@ stijn26 आपने शायद कुछ गलत किया है और यह

• १.६ -१.५ के साथ तुलना करने पर १.६ परिवर्तन हुए हैं, कृपया उन पर विचार करें - आप गीथब पर चैंज में बदलाव देख सकते हैं (१.५ इंस्टाड की कोशिश करें)
• क्या आपने सभी मॉड्यूल अपडेट किए? इसी संशोधन के लिए कोणीय animate.js की तरह या बस angular.min.js? अगर कोशिश नहीं की

मैंने सभी ब्रेकिंग परिवर्तनों की जाँच की और उन्हें संशोधित किया, सभी मॉड्यूल अपडेट किए गए। मेरे पास इस धागे के बाकी व्यक्तियों के समान सटीक मुद्दा था।

@mmomeni @ stijn26 @teterovic
अभी के लिए, हमने आस-पास का काम ढूंढ लिया, जिसे चेतन को चालू और बंद करना है और यह हमारे लिए अब तक ठीक काम कर रहा है। उदाहरण नीचे है। आशा है कि यह आप लोगों की भी मदद कर सकता है जब तक कि टीम सही फिक्स नहीं पाती है ???

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

मुझे विंडोज 7. 7 पर क्रोम 57 पर कोणीय 1.6.3 पर एनजी-शो के साथ यह झिलमिलाहट मिल रही है। प्रदर्शन: कोई भी नहीं। पर-ng-hide.ng-hide-aimate मेरे लिए इसे ठीक करता है।

@ samal84 आप एक डेमो प्रदान कर सकते हैं? मैं क्रोम 58 में इसे पहले पोस्ट में 1.6.4 में अपडेट किए गए के साथ पुन: पेश नहीं कर सकता।

ठीक है यह कोणीय सामग्री md-switch के साथ एक बग जैसा दिखता है, अब जब मैंने एक न्यूनतम डेमो बनाने की कोशिश की: http://plnkr.co/edit/hR2B8yEPjak0v2Yryid1?p=preview

स्विच को जल्दी से क्लिक करने का प्रयास करें, और आपको यह देखना चाहिए कि md- स्विच के अंदर और बाहर अलग-अलग व्यवहार होता है। दोनों के अंदर एक एक दूसरे के विभाजन के लिए प्रस्तुत किया जा रहा है, जबकि एक बाहर ठीक है।

@ samal84 यह भी $ चेतन (जो कोणीय-सामग्री का उपयोग करता है) को अक्षम करके तय किया गया है। डेमो:
http://plnkr.co/edit/C08HPffIBTomH1QoBdRD?p=#view