आईओएस फ़्लिकर बग जब सीएसएस ओवरफ़्लो: स्क्रॉल को ओवरफ़्लो में बदल दिया गया है: छुपा

Question

मैं फोनगैप के माध्यम से एक ऐप बना रहा हूं और जब मैं मेनू के नीचे से मेनू को स्वाइप करता हूं तो मैं पृष्ठभूमि में div की स्क्रॉल को अक्षम करना चाहता हूं स्क्रीन;

स्क्रॉल से छिपे हुए ओवरफ्लो को बदलकर छुपाएं क्यों वह मेनू स्वाइप सक्रिय काम करता है, लेकिन यह स्क्रीन को झिलमिलाहट का कारण बनता है।

ओवरफ्लो प्रोपरी बदल जाने पर किसी को भी एक झटके को रोकने के लिए किसी भी हैक आस-पास को पता है?

Answer 1

फ़्लिकर बग स्मार्टफ़ोन की GPU स्मृति से संबंधित है। स्मृति सीमित है (वीआरएएम), और यदि तत्व स्मृति से बहुत जटिल या बड़े हैं, तो यह समाप्त हो जाएगा। CyanogenMod रोम के साथ एंड्रॉइड में आप स्क्रीन में रंगों के साथ जीपीयू प्रसंस्करण देख सकते हैं। हरे (कम उपयोग) से लाल (जीपीयू का उच्च उपयोग) से। Demo image। लेकिन मुझे नहीं पता कि आईओएस के लिए एक समान उपकरण मौजूद है या नहीं।

यह ऐप के सभी संक्रमणों में या जब यह GPU का उपयोग करता है, में दिखाई देता है।

वैसे भी आप की कोशिश कर सकते हटाने/here से अपने तत्वों की जटिलता, या इस को कम:

विकल्प 1

<meta name="viewport" content="width=device-width, user-scalable=no" /> 

विकल्प 2this:

.ui-page { 
    -webkit-backface-visibility: hidden; 
} 

ओप tion 3this:

.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"], 
.ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active { 
     overflow: hidden; 
     -webkit-backface-visibility: hidden; 
} 

.ui-header { 
    position:fixed; 
    z-index:10; 
    top:0; 
    width:100%; 
    padding: 13px 0; 
    height: 15px; 
} 

.ui-content { 
    padding-top: 57px; 
    padding-bottom: 54px; 
    overflow: auto; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.ui-footer { 
    position:fixed; 
    z-index:10; 
    bottom:0; 
    width:100%; 
} 

या बस संक्रमण को दूर (यदि समस्या संक्रमण में है):

विकल्प 4

'-webkit-transition': 'none !important', 
'-moz-transition': 'none !important', 
'-o-transition': 'none !important', 
'-ms-transition': 'none !important', 
'transition': 'none !important' 

Answer 2

अतिप्रवाह के मान का बदलना बनाने के लिए लगता है -webkit-overflow-scrollingसे मूल्य परिवर्तन से ऑटो, जो कि झटके का कारण बनता है।

आप इस आलेख में कुछ जानकारी पा सकते हैं: http://slytrunk.tumblr.com/post/33861403641/ios6-web-app-flickering-with। समस्या आईओएस 7 में बनी हुई है, लेकिन केवल, मैंने जो देखा, उसके लिए, जब आप स्पर्श से ऑटो पर स्विच करते हैं (ऑटो से स्पर्श करने के लिए अब नहीं)।

कोई भी वेब-बैकफ़ेस-दृश्यता: छुपा, -webkit-transform: translate3d (0,0,0), आदि मेरे मामले में काम किया।

में पहले से लेख का उल्लेख सुझाव के रूप में, एक वैकल्पिक हल के साथ रहना हो सकता है -webkit-अतिप्रवाह-स्क्रॉलिंग: ऑटो, अच्छा उपयोगकर्ता अनुभव प्रदान करता है की कीमत पर।

एक और, जावास्क्रिप्ट के साथ स्क्रॉल लॉक करने के लिए यदि आपकी साइट इसे बर्दाश्त कर सकते होगा:

function disableScroll() { 
    $(element).on('touchmove', function(event){ 
    event.preventDefault(); 
    }); 
}, 

function enableScroll() { 
    $(element).off('touchmove'); 
} 

Answer 3

जो काम करता है -webkit-backface-visibility: hidden; का उपयोग कर समाधान, प्रदर्शन के मुद्दों पैदा करने के लिए यदि आप एक पृष्ठ पर एकाधिक scrollers है लगता है।पुराने आईपैड पर सफारी सीपीयू सीमाओं को मार रहा था और ब्राउज़र को दुर्घटनाग्रस्त कर रहा था।

मुझे एक ऐसा समाधान मिला जो मेरे एसपीए (जो सूची में 100 स्लाइडर तक कुछ भी हो सकता है) के लिए काम करता है पृष्ठ पृष्ठ & पर छिपाने वाली शैली के साथ कक्षा को जोड़कर और हटाकर।

.touchslide { 
    -webkit-overflow-scrolling:touch; 
} 

(jQuery शैली छद्म कोड का उपयोग करना) जब आप पृष्ठ छोड़ देते हैं, तो पृष्ठ लोड पर वर्ग

selector.removeClass("touchslide"); 

निकालें:

selector.addClass("touchslide"); 
    selector.scrollLeft(0); 

आप पर स्क्रॉल घटना को गति प्रदान करने की जरूरत है आईओएस, इसलिए एचटीएमएल ऑब्जेक्ट को लक्षित करें और स्क्रॉल लेफ्ट में जोड़ें क्योंकि पहले स्क्रोल में जड़त्व प्रभाव नहीं होगा।