Ionic-framework: बग: एंड्रॉइड पर टैब के बीच स्विच करते समय सफेद फ्लैश दिखाई दे रहा है

इस मुद्दे की स्थिति के बारे में कोई शब्द?

एक ही मुद्दा होना। कोई अपडेट्स?

+1

कृपया एक न्यूनतम उदाहरण प्रदान करें जिसमें यह समस्या हो।

बस एक नया आयनिक ऐप बनाएं (टैब टेम्प्लेट) पृष्ठभूमि को किसी भी रंग में बदल दें या तो सफेद। एंड्रॉइड डिवाइस पर बनाएं और चलाएं (4.4, मुझे नेक्सस 5 पर परीक्षण किया गया है) और आप देखेंगे कि प्रत्येक टैब परिवर्तन पर कुछ मिली के लिए एक सफेद झटका है।

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

'आयन-हेडर-बार' स्वचालित रूप से मेरे लिए उत्पन्न होता है, जहां (और कैसे) आप इसे मैन्युअल रूप से उपयोग करते हैं?

तो @GentryRiggen आपका मतलब आयन-एनएवी-बार से है?

@mhartington मैं आयन-साइड-मेनू-सामग्री के अंदर आयन-टैब के साथ आयन-साइड-मेनू का उपयोग कर रहा हूं।

<ion-side-menus>
  <ion-side-menu side="left" class="left-side-menu">
    <ion-content drag-content="false" overflow-scroll="false" direction="y" delegate-handle="leftMenu">
      <div class="list">
        <a menu-close class="item item-icon-left" >Something</a>
        <a menu-close class="item item-icon-left" >Something</a>
        <a menu-close class="item item-icon-left" >Something</a>
      </div>
    </ion-content>
  </ion-side-menu>

  <ion-side-menu-content>
    <ion-header-bar align-title="center" class="bar-positive">
      <button class="button button-icon icon ion-navicon" menu-toggle="left"></button>
      <div class="titles">
            <h>TITLE</h1>
      </div>
    </ion-header-bar>

    <ion-tabs class="tabs-positive tabs-icon-only dark-background">
      <ion-tab>
        <ion-nav-view name="tab-1"></ion-nav-view>
      </ion-tab>

      <ion-tab>
        <ion-nav-view name="tab-2"></ion-nav-view>
      </ion-tab>

      <ion-tab>
        <ion-nav-view name="tab-3"></ion-nav-view>
      </ion-tab>
    </ion-tabs>
  </ion-side-menu-content>

</ion-side-menus>

उसके लिए आयन-हेडर-बार का उपयोग न करें, आयन-एनएवी-बार का उपयोग करें।

@mhartington Im 'आयन-एनएवी-बार' का उपयोग कर रहा है और स्क्रीन टिमटिमा रहा है (टैब के बीच चलते समय) ...
तो आप इसे ठीक करने का सुझाव कैसे देते हैं?

एंड्रॉइड के लिए निर्मित आयनिक से सरल टैब "स्टार्टर" नेविगेट करने के बीच फ्लैश दिखाता है और मेरा मानना ​​​​है कि आयन-एनएवी-बार का उपयोग करता है।

हम्म, मैं इसे अपने परीक्षणों में नहीं देख रहा हूँ।

https://youtu.be/_ja8a08iSPE

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

क्या आप लुप्त होती नौसेना बार के बारे में बात कर रहे हैं?

वह सफेद स्क्रीन (आयन-सामग्री परिधि) के बारे में बात कर रहा है जो टैब स्विच करने पर संक्षिप्त रूप से प्रकट होता है।
जब आप पहली बार "स्थिति" से "चैट" पर स्विच करते हैं, तो आप इसे अपने वीडियो में स्पष्ट रूप से देख सकते हैं। लेकिन वास्तव में यह हर बार दिखाई देता है।

@mhartington मैंने अपने ऐप (धीमी गति) के रूप में एक वीडियो संलग्न किया है, आप इसे स्पष्ट रूप से वहां संलग्न देख सकते हैं।
मैं एक कार्रवाई करना चाहता हूं और आप लोगों को उस मुद्दे को हल करने में मदद करना चाहता हूं, लेकिन मुझे कम से कम एक शुरुआत की जरूरत है .. मुझे कहां से शुरू करना चाहिए?

यूट्यूब लिंक: https://youtu.be/TTuNPlL6Fmg

धन्यवाद।

मैंने कोड को देखा है और मेरे लिए त्रुटि टैब में है चयनित फ़ंक्शन (आयनटैब निर्देश)
ऐसा लगता है कि नया दिखाने से पहले पिछले टैब को छिपा दिया गया है।

मैंने जो गंदा हैक बनाया है वह काम करने लगता है। लेकिन मुझे एक उचित फिक्स देखना अच्छा लगेगा।
बस $ionicViewSwitcher.viewEleIsActive(childElement, false) के आसपास एक टाइमआउट जोड़ें;

Ionic.bundle.js . की लाइन 55025

$timeout(function () {
 $ionicViewSwitcher.viewEleIsActive(childElement, false);
}, 100);

यह मेरे साथ हो रहा है:

• आयनिक, v1.0.1
• कॉर्डोवा 5.3.3

मैं नेक्सस 4 पर एंड्रॉइड 5.1.1 चला रहा हूं।

इसे पुन: पेश करने के लिए, मैं बस एक "टैब" स्टार्टर ऐप बनाता हूं, नेवबार का रंग बदलकर नीला कर देता हूं (उदाहरण के लिए -स्थिर से -पोजिटिव बदलकर) और झिलमिलाहट स्पष्ट हो जाती है। यह वास्तव में सफेद नावबार के साथ झिलमिलाहट करता है लेकिन आप सफेद टिमटिमाते हुए सफेद नहीं देख सकते हैं।

मैंने एंड्रॉइड पर संक्रमण-समय को 0ms के लिए मजबूर करने के लिए शैलियों को जोड़ने का प्रयास किया है और सत्यापित किया है कि ऐप ने इन शैलियों को एक संलग्न क्रोम इंस्पेक्टर के साथ जांच कर और गणना किए गए सीएसएस मूल्यों का निरीक्षण करके किसी भी हेडर आइटम पर लागू किया है। मैंने शैलियों को हटाकर और सत्यापित किया कि वे 0ms से किसी अन्य संख्या (0.2ms या 0.5ms - और वास्तव में चमकती प्रभाव के रूप में तेज़) पर गए थे।

मैंने @didbarbosa को ठीक करने की कोशिश की लेकिन ब्राउज़र और फ़ोन ऐप पर क्रोम दोनों ने शिकायत की कि $timeout परिभाषित नहीं किया गया था। जब मैंने $timeout का मान लॉग किया, तो यह वास्तव में परिभाषित नहीं किया गया था।

@ lloy0076 आपको इसे निर्देश में इंजेक्ट करने की आवश्यकता है

IonicModule
.directive('ionTab', [
  '$compile',
  '$ionicConfig',
  '$ionicBind',
  '$ionicViewSwitcher',
  '$timeout',
function($compile, $ionicConfig, $ionicBind, $ionicViewSwitcher,$timeout) {

@didbarbosa - असल में मैंने अभी देखा है कि आयनिक का मेरा संस्करण नवीनतम रिलीज नहीं है; इस प्रकार मैंने पढ़ने के लिए अपना "bower.json" बदल दिया:

{
"नाम": "हैलोइओनिक",
"निजी": "सच",
"देव निर्भरता": {
"आयनिक": "ड्रिफ्टीको/आयनिक-बोवर#~1",
"प्लेटफ़ॉर्म.जेएस": "प्लेटफ़ॉर्म#~1.3.0"

... और क्या आप मानते हैं कि यह $timeout समाधान के बिना भी कोई झिलमिलाहट नहीं है ...

हो सकता है कि अगर आपने सीएसएस संक्रमण समाधान के साथ ऐसा करने की कोशिश की तो यह सिर्फ "ठीक" हो सकता है - हालांकि मुझे उन समस्याओं से नफरत है जो जादुई रूप से खुद को ठीक करती हैं।

हाँ ऐसा लगता है कि यह रात की रिलीज़ के साथ गायब हो गया है।
अच्छी खबर :)

असल में यह मेरे लिए तय नहीं है।

मेरे लिए तय नहीं 2:\

इस मुद्दे के बारे में कोई खबर?

मेरे पास आईओएस पर भी यह समस्या है।

आईओएस के संबंध में @harryzun कृपया देखें https://github.com/driftyco/ionic/issues/4395

आईओएस पर यह वही मुद्दा नहीं है

v1.1 में अपग्रेड करने के कुछ समय बाद ही मैंने इसे एंड्रॉइड पर भी नोटिस करना शुरू कर दिया। हालांकि यह निश्चित नहीं है कि यह कब शुरू हुआ।

यह v1 . के आसपास शुरू हुआ

अगर किसी के पास (अस्थायी) फिक्स है, तो मुझे यह सुनना अच्छा लगेगा।

मैं वही बग हूँ... किसी के पास और जानकारी है?? :ऑक्टोपस:

शायद संबंधित नहीं है, लेकिन मेरे पास पहले भी इसी तरह का मुद्दा था, और कुछ विचित्र कारणों से अपमानजनक भाई टैब राज्य के लिए मेरी राज्य परिभाषा से cache: false को हटाने से इस मुद्दे को मंजूरी मिल गई। मेरे पास शून्य विचार है, क्योंकि हम उसी पैटर्न का उपयोग कर रहे हैं, उसी नियंत्रक + टेम्पलेट कॉम्बो के साथ, हमारे टैब सेटअप में 3 अन्य स्थानों में बिना किसी समस्या के।

अपडेट करें

इसलिए मैंने बस थोड़ा सा समय उस मुद्दे की तह तक जाने की कोशिश में बिताया, जो हमने देखा, थोड़े दिलचस्प और मेरी ओर से थोड़ा सा भोलापन StateChangeSuccess से पहले काले रंग की झिलमिलाहट की ओर ले जाता है।

तो जैसा कि ऊपर उल्लेख किया गया है, हम अपने पूरे आवेदन में एक ही पैटर्न का उपयोग करते हैं, लेकिन एक महत्वपूर्ण अंतर के साथ: इस राज्य में वास्तव में एक एपीआई समर्थित संकल्प था जो इसकी राज्य परिभाषा में एक कमी को पूरा करने के लिए था जो वर्तमान में हमारे पिछले छोर पर है जो हमने नहीं किया अन्य x3 राज्यों के साथ हिसाब करने की आवश्यकता है जो इस पैटर्न का उपयोग करते हैं।

"चैट" राज्य टैब के लिए मुख्य राज्य का भाई-बहन था। इस स्थिति तक पहुंचने के लिए आपको मुख्य दृश्य में किसी सदस्य पर क्लिक करना होगा और आप सहोदर चैट स्थिति में पहुंच जाएंगे। सहोदर से इसमें नेविगेट करते समय, कोई काला फ्लैश नहीं देखा गया था, मुख्य स्थिति तब तक दिखाई देगी जब तक कि संकल्प समाप्त नहीं हो जाता, और फिर सामान्य नेविगेशन समाप्त हो जाता। इतिहास में वर्तमान स्थिति के रूप में चैट दृश्य के साथ टैब पर वापस (दूसरे टैब से) नेविगेट करते समय, यूआई-राउटर + आयनिक तुरंत नए टैब पर स्वैप निष्पादित करेगा, लेकिन जब तक संकल्प पूरा नहीं हो जाता तब तक काली स्क्रीन दिखाई देगी .

यह भी समझ में आता है कि cache: false को हटाने और सही पर डिफ़ॉल्ट रूप से समस्या को ठीक करने के लिए क्यों।

जब आप इसके बारे में सोचते हैं तो सही समझ में आता है। उम्मीद है कि यह किसी को सिरदर्द से बचाने में सक्षम हो सकता है यदि वे इस पर Google के माध्यम से ठोकर खाते हैं (उसी तरह मैंने किया)।

मैंने इसे इस लाइन पर ट्रैक किया:
https://github.com/driftyco/ionic/blob/af1bfef327e685585244c6051c4d38b98aa6c62a/js/angular/service/viewSwitcher.js#L194

          if (renderStart && renderEnd) {
            // CSS "auto" transitioned, not manually transitioned
            // wait a frame so the styles apply before auto transitioning
            //$timeout(onReflow, 16); <- original
            onReflow(); // removes flicker
          } else if (!renderEnd) {

टैब स्विच किए जाने पर यह एक फ्रेम झिलमिलाहट का कारण है, क्योंकि नया टैब 16 एमएस बाद तक दिखाई देने के लिए सेट नहीं है।

मुझे यकीन नहीं है कि टैब शामिल होने पर उस पंक्ति का क्या मतलब है, लेकिन यदि आप $timeout कॉल को onReflow() एक साधारण विधि कॉल के साथ प्रतिस्थापित करते हैं, तो कथित प्रदर्शन में काफी सुधार हुआ है और वहां है कोई और झिलमिलाहट। नेवी बार में भी नहीं।

@mhartington इस बारे में कोई विचार? शायद इसे कम से कम विन्यास योग्य बनाया जाना चाहिए।

ऐसा लगता है कि इसे https://github.com/driftyco/ionic/commit/8ebde73d0b8afac1bf1c1787c90a72a28a88bc3a द्वारा @adamdbradley से पेश किया गया है।

संपादित करें: ऐसा लगता है कि if स्थिति को बदलने के लिए एक बेहतर फिक्स है:

if (direction !== 'swap' && renderStart && renderEnd) {

संपादित 2: एक और बेहतर समाधान जो किसी भी संभावित दुष्प्रभाव से छुटकारा दिलाता है, वह है $timeout कॉल को इसके साथ बदलना:
ionic.requestAnimationFrame(onReflow);
मैं इसके साथ एक पीआर भेजूंगा।

ओपन पीआर https://github.com/driftyco/ionic/pull/4654

बहुत अच्छी तरह से किया!
मेरे लिए इस मुद्दे को ठीक करता है।

बहुत बहुत धन्यवाद दोस्त।

मेरे लिए काम नहीं किया ... मैंने अपनी आयनिक-एंगुलर.जेएस फ़ाइल को अपडेट कर दिया है, लेकिन मुझे कोई बदलाव नहीं दिख रहा है, भले ही मैं प्रारंभिक टाइमआउट मान बढ़ा रहा हूं। क्या मैं कुछ भूल रहा हूँ?
एनएवी बार झिलमिलाहट के लिए मैंने इस फिक्स का इस्तेमाल किया https://forum.ionicframework.com/t/flickering-when-navigating-via-tabs-on-android/27281 लेकिन अब सामग्री टिमटिमा रही है।

अंत में यह काम कर रहा है लेकिन यह अभी भी प्रत्येक टैब के लिए पहली बार झिलमिलाहट कर रहा है, कोई विचार क्यों?

क्या इस मुद्दे पर कोई रिलीज योजना है? 1.2 या 1.3?

यह हालिया 1.2 रिलीज में शामिल है।

+1, क्या कोई अन्य समाधान है?

वाह यह अभी भी चल रहा है। एह .. क्या कोर टीम का पता लगाना एक अच्छा विचार होगा कि यह क्या था किसी के पास स्रोत कोड के लिए एक अच्छा संकेतक है जिसके साथ हम प्रयोग करना शुरू कर सकते हैं?

क्या 1.2 ने इसे ठीक किया? वहां एक प्रतिबद्धता थी जिसे इस मुद्दे को संबोधित करना चाहिए था।

बग अभी भी यहाँ 1.2 से 1.2.2 . पर है

मैंने फिर से कोशिश की और यदि आप डालते हैं तो इसे हल किया जाता है:

ionic.requestAnimationFrame(onReflow);  

जैसा उसने कहा, और नहीं:

$timeout(function() {
              ionic.requestAnimationFrame(onReflow);
            });

जाहिर है, $timeout कुछ कर रहा है

@mlynch शायद आपको याद है कि यह किस लिए था? https://github.com/driftyco/ionic/commit/d0246cf975bb4022eb890d3b0c28964e3065644c#diff -e25bdd32bda2f4f00f01c823ec86b1f3

ऐसा लगता है कि इसे फिर से तोड़ दिया है।

शायद इसीलिए:

यदि कोड $timeout का उपयोग करके कतारबद्ध है, तो इसे तब चलना चाहिए जब DOM को कोणीय द्वारा हेरफेर किया गया हो, और ब्राउज़र के रेंडर होने के बाद (जो कुछ मामलों में झिलमिलाहट का कारण हो सकता है)

1.2.5 . के लिए समीक्षा

दुर्भाग्य से, इसने #4782 को तोड़ दिया जिसके कारण बैक व्यू कभी-कभी सही ढंग से चेतन नहीं होता। $timeout को हटाना शायद इसके लिए एक समाधान के लिए बहुत सरल है।

जब भी मैं टाइमआउट हटाता हूं तब भी समस्या होती है ..

+1

ये भी समस्या हो...

+1

+1

ध्यान दें, अपने Bower.json को अपडेट करने से मदद मिलती है (हाइलाइटिंग सही करें), लेकिन जैसा कि बताया गया है, इसमें थोड़ी देरी है

{
"नाम": "हैलोइओनिक",
"निजी": "सच",
"देव निर्भरता": {
"आयनिक": "ड्रिफ्टीको/आयनिक-बोवर#1.7.12", // यहां, सुनिश्चित करें कि यह अपडेट हो गया है
"aws-sdk-js": "~2.0.9",
"बूटस्ट्रैप": "~ 3.2.0",
"प्लेटफ़ॉर्म.जेएस": "प्लेटफ़ॉर्म#~1.3.1"
}
}

वैसे भी, मामूली फ्लैश केवल एंड्रॉइड पर है, और यह केवल एक सेकंड का अंश है।

क्या कोई पुष्टि कर सकता है कि 1.2.3 "copenhagen" इस समस्या को ठीक करता है?

@mhartington @mlynch मैं पुष्टि कर सकता हूं कि यह अभी भी संस्करण 1.2.3 के साथ काम नहीं कर रहा है। स्क्रीनशॉट के इन अनुक्रमों पर एक नज़र डालें।

मैं सबसे पहले अपने बिल टैब पर इस तरह से शुरुआत कर रहा हूं:

मैं फिर अपने रूममेट्स टैब पर टैप करता हूं और निम्नलिखित चरण होते हैं (जो पलक झपकने का कारण बनता है):

1. ऐप शीर्षक के लिए "बिल" कहता है लेकिन कैश्ड "रूममेट्स" टैब दिखा रहा है
   
2. ऐप तब सभी सामग्री को हटा देता है, लेकिन फिर भी "बिल" शीर्षक दिखाता है
   
3. ऐप "रूममेट्स" सामग्री दिखाता है
   
4. ऐप "रूममेट्स" शीर्षक में फीका है
   

इन सभी चरणों को मिलाकर यह टैब स्विच करते समय एक भयानक झिलमिलाहट पैदा करता है।

बग को प्रभावित करने के लिए, इस वीडियो को देखें:
https://dl.dropboxusercontent.com/u/97539058/Bugs/tabs-bug.mp4

अरे मुझे एहसास हुआ कि मेरी बग मेरे आवेदन में SQLite का उपयोग करने में एक समस्या थी। गलतफहमी के लिए खेद है।

+1

+1

+1

ऐसा लगता है कि टाइमआउट के साथ समस्या है

मुद्दा बस मेरे लिए गायब हो गया! मुद्दा उस तरीके से संबंधित था जिस तरह से मैंने अपने टैब बनाए थे!
सुनिश्चित करें कि आप इसे अच्छे तरीके से बनाते हैं, टैब के अंदर भी नेविगेशन। नियंत्रक माता-पिता का ख्याल रखना ==> बच्चे

कोई और सफेद फ्लैश नहीं

@princefr क्या आप कृपया विस्तृत कर सकते हैं?

IOS के लिए, मुझे css[ionic.CSS.TRANSITION_DURATION] को css.WebkitTransition से ionic.bundle.js लाइन 47715 और 47750 में बदलना पड़ा

`// आईओएस ट्रांजिशन
// -----------------------
प्रदाता.संक्रमण.दृश्य.ios = फ़ंक्शन (प्रवेश करना, छोड़ देना, दिशा, चाहिएएनिमेट) {

function setStyles(ele, opacity, x, boxShadowOpacity) {
  var css = {};
  css.WebkitTransition = d.shouldAnimate ? '' : 0;
  css.opacity = opacity;
  if (boxShadowOpacity > -1) {
    css.boxShadow = '0 0 10px rgba(0,0,0,' + (d.shouldAnimate ? boxShadowOpacity * 0.45 : 0.3) + ')';
  }
  css[ionic.CSS.TRANSFORM] = 'translate3d(' + x + '%,0,0)';
  ionic.DomUtil.cachedStyles(ele, css);
}

var d = {
  run: function(step) {
    if (direction == 'forward') {
      setStyles(enteringEle, 1, (1 - step) * 99, 1 - step); // starting at 98% prevents a flicker
      setStyles(leavingEle, (1 - 0.1 * step), step * -33, -1);

    } else if (direction == 'back') {
      setStyles(enteringEle, (1 - 0.1 * (1 - step)), (1 - step) * -33, -1);
      setStyles(leavingEle, 1, step * 100, 1 - step);

    } else {
      // swap, enter, exit
      setStyles(enteringEle, 1, 0, -1);
      setStyles(leavingEle, 0, 0, -1);
    }
  },
  shouldAnimate: shouldAnimate && (direction == 'forward' || direction == 'back')
};

return d;

};

प्रदाता.transitions.navBar.ios = function(entingHeaderBar, छोड़नेHeaderBar, दिशा, चाहिएएनिमेटेड) {

function setStyles(ctrl, opacity, titleX, backTextX) {
  var css = {};
  css.WebkitTransition = d.shouldAnimate ? '' : '0ms';
  css.opacity = opacity === 1 ? '' : opacity;

  ctrl.setCss('buttons-left', css);
  ctrl.setCss('buttons-right', css);
  ctrl.setCss('back-button', css);

  css[ionic.CSS.TRANSFORM] = 'translate3d(' + backTextX + 'px,0,0)';
  ctrl.setCss('back-text', css);

  css[ionic.CSS.TRANSFORM] = 'translate3d(' + titleX + 'px,0,0)';
  ctrl.setCss('title', css);
}

function enter(ctrlA, ctrlB, step) {
  if (!ctrlA || !ctrlB) return;
  var titleX = (ctrlA.titleTextX() + ctrlA.titleWidth()) * (1 - step);
  var backTextX = (ctrlB && (ctrlB.titleTextX() - ctrlA.backButtonTextLeft()) * (1 - step)) || 0;
  setStyles(ctrlA, step, titleX, backTextX);
}

function leave(ctrlA, ctrlB, step) {
  if (!ctrlA || !ctrlB) return;
  var titleX = (-(ctrlA.titleTextX() - ctrlB.backButtonTextLeft()) - (ctrlA.titleLeftRight())) * step;
  setStyles(ctrlA, 1 - step, titleX, 0);
}

var d = {
  run: function(step) {
    var enteringHeaderCtrl = enteringHeaderBar.controller();
    var leavingHeaderCtrl = leavingHeaderBar && leavingHeaderBar.controller();
    if (d.direction == 'back') {
      leave(enteringHeaderCtrl, leavingHeaderCtrl, 1 - step);
      enter(leavingHeaderCtrl, enteringHeaderCtrl, 1 - step);
    } else {
      enter(enteringHeaderCtrl, leavingHeaderCtrl, step);
      leave(leavingHeaderCtrl, enteringHeaderCtrl, step);
    }
  },
  direction: direction,
  shouldAnimate: shouldAnimate && (direction == 'forward' || direction == 'back')
};

return d;

};`

ऐसा लगता है कि जब मैंने इस लाइन को https://github.com/driftyco/ionic/blob/master/js/angular/service/viewSwitcher.js#L142 में बदला तो यह मेरे लिए ठीक हो गया है:

callback && ionic.requestAnimationFrame(callback);

सुनिश्चित नहीं है कि यह इसे ठीक करने का एक सही तरीका है, हालांकि।

क्या यह आईओएस के कुछ रिलीज पर भी होता है (यह याद रखना कि रिपोर्ट एंड्रॉइड रिलीज पर है)?

से: अब्दुल वहाब [mailto:[email protected]]
भेजा गया: बुधवार, 10 फरवरी 2016 रात 9:59 बजे
प्रति: ड्रिफ्टीको/आयनिक आयनिक @noreply.github.com
सीसी: डेविड लॉयड [email protected]
विषय: पुन: [आयनिक] बग: एंड्रॉइड पर टैब के बीच स्विच करते समय सफेद फ्लैश दिखाई दे रहा है (#3907)

IOS के लिए, मुझे css[ionic.CSS.TRANSITION_DURATION] को css.WebkitTransition से ionic.bundle.js लाइन 47715 और 47750 में बदलना पड़ा

`// आईओएस ट्रांजिशन
// -----------------------
प्रदाता.संक्रमण.दृश्य.ios = फ़ंक्शन (प्रवेश करना, छोड़ देना, दिशा, चाहिएएनिमेट) {

फ़ंक्शन सेट स्टाइल (एली, अस्पष्टता, एक्स, बॉक्सशैडोओपेसिटी) {
वर सीएसएस = {};
css.WebkitTransition = d. shouldAnimate ? '': 0;
css.अस्पष्टता = अस्पष्टता;
अगर (बॉक्सशैडोओपेसिटी> -1) {
css.boxShadow = '0 0 10px rgba(0,0,0,' + (d. shouldAnimate ? boxShadowOpacity * 0.45: 0.3) + ')';
}
css[ionic.CSS.transform] = 'translate3d(' + x + '%,0,0)';
आयनिक.DomUtil.cachedStyles(ele, css);
}

वर डी = {
रन: फ़ंक्शन (चरण) {
अगर (दिशा == 'आगे') {
setStyles(प्रवेश Ele, 1, (1 - चरण) * 99, 1 - चरण); // 98% से शुरू होने से झिलमिलाहट को रोकता है
सेट स्टाइल्स (छोड़कर एली, (1 - 0.1 * स्टेप), स्टेप * -33, -1);

} else if (direction == 'back') {
  setStyles(enteringEle, (1 - 0.1 * (1 - step)), (1 - step) * -33, -1);
  setStyles(leavingEle, 1, step * 100, 1 - step);

} else {
  // swap, enter, exit
  setStyles(enteringEle, 1, 0, -1);
  setStyles(leavingEle, 0, 0, -1);
}

},
shouldAnimate: shouldAnimate && (दिशा == 'आगे' || दिशा == 'वापस')
};

वापसी घ;

};

प्रदाता.transitions.navBar.ios = function(entingHeaderBar, छोड़नेHeaderBar, दिशा, चाहिएएनिमेटेड) {

फंक्शन सेट स्टाइल्स (ctrl, opacity, titleX, backTextX) {
वर सीएसएस = {};
css.WebkitTransition = d. shouldAnimate ? '' : '0ms';
css.opacity = अस्पष्टता === 1 ? '' : अस्पष्टता;

ctrl.setCss ('बटन-बाएं', सीएसएस);
ctrl.setCss ('बटन-दाएं', सीएसएस);
ctrl.setCss ('बैक-बटन', css);

css[ionic.CSS.transform] = 'translate3d(' + backTextX + 'px,0,0)';
ctrl.setCss ('बैक-टेक्स्ट', css);

css[ionic.CSS.transform] = 'translate3d(' + titleX + 'px,0,0)';
ctrl.setCss ('शीर्षक', सीएसएस);
}

फंक्शन एंटर (ctrlA, ctrlB, स्टेप) {
अगर (!ctrlA || !ctrlB) वापसी;
वर शीर्षकX = (ctrlA.titleTextX () + ctrlA.titleWidth ()) * (1 - चरण);
वर backTextX = (ctrlB && (ctrlB.titleTextX () - ctrlA.backButtonTextLeft ()) * (1 - चरण)) || 0;
सेट स्टाइल्स (ctrlA, स्टेप, टाइटलएक्स, बैकटेक्स्टएक्स);
}

फंक्शन लीव (ctrlA, ctrlB, स्टेप) {
अगर (!ctrlA || !ctrlB) वापसी;
var titleX = (-(ctrlA.titleTextX() - ctrlB.backButtonTextLeft ()) - (ctrlA.titleLeftRight ())) * स्टेप;
सेट स्टाइल्स (ctrlA, 1 - स्टेप, टाइटलएक्स, 0);
}

वर डी = {
रन: फ़ंक्शन (चरण) {
वर enterHeaderCtrl = entryHeaderBar.controller();
वर छोड़ना हैडरCtrl = छोड़ना हैडरबार && छोड़ना हैडरबार। नियंत्रक ();
अगर (डी.दिशा == 'वापस') {
छोड़ो (प्रविष्ट करनाHeaderCtrl, छोड़करHeaderCtrl, 1 - चरण);
दर्ज करें (छोड़करHeaderCtrl, EnterHeaderCtrl, 1 - चरण);
} अन्यथा {
दर्ज करें (प्रविष्ट करनाHeaderCtrl, छोड़करHeaderCtrl, चरण);
छोड़ो (छोड़करHeaderCtrl, दर्ज करनाHeaderCtrl, चरण);
}
},
दिशा: दिशा,
shouldAnimate: shouldAnimate && (दिशा == 'आगे' || दिशा == 'वापस')
};

वापसी घ;

};`

-
इस ईमेल का सीधे उत्तर दें या इसे GitHub https://github.com/driftyco/ionic/issues/3907#issuecomment -182324500 पर https://github.com/notifications/beacon/ABHsBD1Sp3tXsq8707UTfdVHgqSlxI0zks5pixaSgaJpZM4E82pl.gif

+1
एंड्रॉइड पर फ्लैश ..

1+

+1

दोस्तों बस " कैश: ट्रू " आपके " स्टेट " में है ताकि एक्सट्रैक्ट और रेंडरिंग सुचारू रूप से चलने से पहले आपके पेज को कैश किया जा सके

@ हरीश-यहाँ पहली बार क्या हुआ?

हाँ, कैश का उपयोग करना वास्तव में एक अच्छा विचार नहीं है: केवल इन उद्देश्यों के लिए सच है

@ हरीश-यहाँ। . मेरे पास एक ऐप है जो विभिन्न पृष्ठों के लिए एक ही राज्य का उपयोग करता है। यानी यह एक विस्तृत दृश्य है जो कुछ $ राज्य पैरा लेता है। चूंकि यह अलग-अलग सामग्री के साथ एक ही दृश्य है, इसलिए मैं कैश का उपयोग नहीं कर सकता: झूठा :)
और यह इस विशेष समस्या के लिए भी एक अच्छा विचार प्रतीत नहीं होता है

यहाँ अभी भी वही समस्या चल रही है 1.2.4-रात-रात-1917

+1

@princefr - हाँ, कृपया विस्तार से बताएं कि इस समस्या को कम करने के लिए टैब के लिए उचित मार्कअप क्या होगा

@princefr कृपया यदि आप टैब संरचना पर विस्तार से

यह अभी भी मेरे लिए एक मुद्दा है और काफी निराशाजनक है। क्या कोई आंदोलन है, या कोई समझा हुआ संकल्प है?

+1

+1

कल इसे देख रहे हैं दोस्तों! मुस्कराहट:

IOS के साथ एक संबंधित समस्या है जिसे मैं आज रात बाद में यहां लिंक करूंगा। मैं इसे पुन: पेश करने में सक्षम था।

धन्यवाद @ एमहार्टिंगटन!

कुछ और संदर्भ जोड़ने के लिए, मेरी स्थिति में मुझे निम्नलिखित के साथ मौजूद बग मिला:

अनुक्रमणिका.html
<ion-nav-view></ion-nav-view>

देखें-1.html
<ANY ELEMENT>Something</ANY ELEMENT><ion-nav-view></ion-nav-view>

उप-दृश्य-1.html
<ANY></ANY>

लेकिन मौजूद नहीं है जब मैंने view-1.html से <ANY ELEMENT> को हटा दिया।

इसलिए, मेरे मामले में, मैं मूल राज्य की सामग्री को पूरी तरह से बदले बिना, एक मूल राज्य के अंदर एक बाल-राज्य दिखाने के वांछित प्रभाव को प्राप्त करने में असमर्थ हूं।

मैंने सभी तरह के ui-view/ion-view/ion-nav-view/ion-tabs/ion-pane/etc की कोशिश की। बिल्कुल कुछ भी काम नहीं किया।

यह समस्या उसी बग का वर्णन कर रही है लेकिन iOS https://github.com/driftyco/ionic/issues/5888 पर

@mhartington क्या आप कॉन्फ़्रेंस ऐप से परीक्षण कर सकते हैं? टैब के माध्यम से स्विच करते समय मैं और @ ब्रांडी दोनों कुछ मामूली फ्लैश को

# 5888 में बग आयनिक 2 के लिए है, हालांकि, मुझे यकीन नहीं है कि कोड बेस समान बग होने के लिए समान हैं।

हे याल, इस पर धैर्य रखने के लिए धन्यवाद, वास्तव में इसकी सराहना करें: मुस्कान:

तो चीजों को देखते हुए, यह आईओएस और एंड्रॉइड दोनों को आयनिक 1.2.4 के साथ प्रभावित करना चाहिए, है ना?

साथ ही, क्या कोई इसे टैब स्टार्टर ऐप के साथ फिर से बनाने में सक्षम है?

@mhartington यह टैब स्टार्टर ऐप में है, आपको बस बहुत चौकस रहने की जरूरत है। इसके अलावा, मैंने इसे https://github.com/driftyco/ionic/pull/4654 में तय किया था, लेकिन जाहिर तौर पर इसने कुछ और तोड़ दिया, और फिर जब यह ठीक हो गया, तो यह फिर से टूट गया।

आप इसे अपने द्वारा पोस्ट किए गए वीडियो में देख सकते हैं: https://www.youtube.com/watch?v=_ja8a08iSPE&feature=youtu.be बस ध्यान दें कि कैसे नया टैब दिखने के बजाय, एक बहुत ही संक्षिप्त सफेद फ्लैश है (1 फ्रेम, यह जल्दी से)।

@andreialecu ठीक है, इसे भी देखकर,

https://youtu.be/R5EafRKTst0

वही क्लिप, बस बहुत धीमी हो गई

पीआर को देखते हुए, यह देखना कि क्या किया जा सकता है और इसे अन्य चीजों को तोड़ने से रोकें: मुस्कराहट:

सभी को प्रणाम! इसलिए मुझे लगता है कि मैं इस पर कुछ हद तक आगे बढ़ने में सक्षम हूं। मैंने एक पीआर खोला है जो मेरे परीक्षणों में अच्छा दिखता है, लेकिन पहले आपसे कुछ प्रतिक्रिया सुनना अच्छा लगेगा।

फ़्लिकर शाखा देखने के लिए परिवर्तन किए गए हैं

https://github.com/driftyco/ionic/pull/5937

यदि आपको कोड को नीचे खींचने, स्रोत से आयोनिक बनाने और अपने ऐप में बदलावों का परीक्षण करने में कोई आपत्ति नहीं है, तो हम देख सकते हैं कि क्या यह चीजों को ठीक करता है और इस बग को खत्म करता है: शिपिट:

बहुत बढ़िया। क्या यह एक Android विशिष्ट लोमड़ी है या iOS भी बेहतर दिखाई देगा?

@ctcampbell एंड्रॉइड एटीएम। अपने परीक्षणों में, मैं iOS पर झिलमिलाहट पैदा करने में सक्षम नहीं था

यहां PR . को प्रदर्शित करने वाला एक त्वरित वीडियो है

https://youtu.be/nWSuocu64FU

+1

@jordantomax क्या इसका मतलब यह है कि पीआर आपके लिए अच्छा काम करता है? मुस्कराहट:

वूप्स, नो सॉरी। बस फ़ीड की सदस्यता ले रहे हैं। हालांकि मैं इसका परीक्षण कर सकता हूं। क्या मुझे उपयोग करने के लिए कुछ संकलित करने की ज़रूरत है, मैं देखता हूं कि रिलीज को आपकी प्रतिबद्धता से छुआ नहीं गया था।

आह

आप इन चरणों का पालन कर सकते हैं।

git clone https://github.com/driftyco/ionic.git
cd ionic 
git checkout viewFlicker
npm install
gulp build

और आपके पास dist/js/ionic.bundle.js में संकलित कोड होना चाहिए
आपको बस उस कोड को एक परीक्षण प्रोजेक्ट में कॉपी/पेस्ट करने और इसे आज़माने में सक्षम होना चाहिए।

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

क्या आप इसके बजाय एक न्यूनतम कोडपेन या गिट रेपो बनाने में सक्षम होंगे जिसे मैं क्लोन और परीक्षण कर सकता हूं?
आपके ऐप का एक समान सेट अप

अच्छा विचार। मैं आज रात या कल सुबह ऐसा करने की कोशिश करूंगा। आपकी सहायता के लिए धन्यवाद।

@mhartington मैंने अभी इसे अपने ऐप में परीक्षण किया है और झिलमिलाहट चली गई है। :+1:

मैंने एंड्रॉइड एन पूर्वावलोकन चलाने वाले नेक्सस 6 पर टैब स्टार्टर का उपयोग करके फिक्स का परीक्षण किया है, एक नेक्सस 7 2013 6.0.1 चल रहा है, एक मोटो एक्स 2014 5.1 चल रहा है और एक नेक्सस 7 2013 4.4.4 चल रहा है और इसमें कोई चमक नहीं देखी गई है उन उपकरणों में से कोई भी। बहुत बढ़िया !

@jordantomax उस उदाहरण को एक साथ प्राप्त करने पर कोई भाग्य?

@mhartington क्षमा करें, पूरी तरह से दलदल हो गया है! मुझे रविवार को इस पर काम करने की उम्मीद है।

@mhartington मैंने अभी अपने ऐप पर इसका परीक्षण किया है बना रहा हूं और एंड्रॉइड और आईफोन # 5937 के साथ तय किए गए प्रतीत होते हैं।

@jordantomax , क्या आपको एक उदाहरण एक साथ रखने का मौका मिला है?

धन्यवाद,
सज्जन

नमस्ते,

यह फिक्स अच्छी तरह से काम करता है, लेकिन ऐसा लगता है कि नेटिव-पेज-ट्रांज़िशन प्लगइन ठीक से काम नहीं कर रहा है... मेरे द्वारा इस फिक्स को लगाने के बाद ट्रांज़िशन पागल चीजें कर रहे हैं। क्या आपको लगता है कि यह जुड़ा हुआ है?

@tgensol इस प्लगइन के लिए डिफ़ॉल्ट पैरामीटर का उपयोग करें, यह इस फिक्स के साथ अच्छी तरह से काम करता है!

हैलो सभी को! जैसा कि यह मेरे परीक्षण के माध्यम से लगता है और आप लोग फिक्स का परीक्षण कर रहे हैं, ऐसा लगता है कि मैं आगे बढ़ रहा हूं और इस मुद्दे को अभी के लिए बंद कर दूंगा। @jordantomax यदि आपको उस परीक्षण को एक साथ फेंकने का मौका मिलता है तो पोस्ट करने के लिए स्वतंत्र महसूस करें और मैं खुशी से फिर से खोलूंगा (:। इसके अलावा

आयनिक रेपो में ब्रेकिंग परिवर्तनों के साथ, हम इसे कैसे संकलित और निर्मित करते हैं

1.x शाखा अब आयोनिक 1.3.1 । यदि आप रेपो क्लोन करते हैं और शाखा चेकआउट करते हैं, तो आप वितरण योग्य फ़ाइलों को उत्पन्न करने के लिए gulp build चलाने में सक्षम होना चाहिए। कृपया मुझे बताएं कि क्या आपको इससे कोई समस्या है।

धन्यवाद,
सज्जन

धन्यवाद। पहले से ही मैन्युअल रूप से जिले को डाउनलोड कर लिया है :D

+1

मैंने इसे ठीक कर दिया है। यह आयनिक व्यू अपडेट आयनिक बार बेववियर से संबंधित होता है: प्रवेश करने से पहले बनाया गया नया बार और पुराने बार (वर्तमान) को छुपाता है जो इसे झपकाता है। समाधान वर्तमान बार को एंटर इवेंट के बाद छिपाने के लिए स्थगित कर रहा है। कृपया मुझे लिखें यदि आपके कुछ प्रश्न हैं।

@smcreator क्या आप कोड स्निपेट साझा कर सकते हैं?

मुझे अभी भी वही समस्या है .... कोई कोड स्निपेट धन्यवाद

मुझे लगता है कि यह समस्या हाल के आयनिक संस्करणों में तय की गई है।

मुझे भी यही समस्या थी और @princefr की प्रतिक्रिया महत्वपूर्ण थी। मेरे पास विचारों पर कई नेविगेशन बार थे। केवल मेरी tabs.html फ़ाइल के शीर्ष पर ion-nav-bar जोड़ते समय मैंने समस्या को ठीक किया:

<ion-nav-bar class="my-custom-bar">
  <ion-nav-back-button class="button-clear">
    <i  class="button button-icon ion-android-arrow-back" ng-click="vm.goBack()"></i>
  </ion-nav-back-button>
</ion-nav-bar>

<ion-tabs>
....
</ion-tabs>

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