CSS3 संपत्ति वेबकिट-अतिप्रवाह-स्क्रॉलिंग: स्पर्श त्रुटि

Question

आईओएस 5 जारी किया वेब डिजाइनर एक नया संपत्ति -webkit-overflow-scrolling:touch IOS उपकरणों हार्डवेयर त्वरक का उपयोग करता है एक स्क्रॉल div के लिए देशी स्क्रॉल प्रदान करने के लिए।

विकास में हमारी साइट पर लागू होने पर यह काम करता है लेकिन अच्छा नहीं है। मेरा मानना ​​है कि एक सीएसएस मुद्दा हो सकता है इसलिए मैं यहां पूछता हूं।

निम्नलिखित fiddle आपको बताएंगे कि यह पूरी तरह से काम कर रहा

आप विकास में हमारी साइट पर पॉप आप सुविधाओं टैब के अंतर्गत लेकिन iOS पर समान पैनल मिलेगा हालांकि स्क्रॉल एकदम सही है overflowed अनुभाग के साथ दिखाया गया नहीं है, तो तस्वीरों में सचमुच दो में कटा हुआ।

http://www.golfbrowser.com/courses/mill-ride/

मैं कैसे इस http://www.golfbrowser.com/photo.PNG

Answer 1

रूप @relluf ने कहा, रिश्तेदार तत्व पर 3 डी बदलाव को लागू करने बग ठीक करता है। हालांकि, मैंने इसे थोड़ा और आगे की जांच की और ऐसा लगता है कि -webkit-transform: translateZ(0px) लागू करना भी काम करता है (यह Google जीएमएपीएस मानचित्र कंटेनर पर करता है) और इसे स्क्रॉल करने योग्य तत्व के प्रत्यक्ष वंशज, अपेक्षाकृत स्थित तत्व पर होने की आवश्यकता नहीं है।

तो अगर आप मैन्युअल रूप से सभी स्थानों पर जहां ठीक की जरूरत है की एक सूची रखने के लिए नहीं करना चाहते हैं, तो आप सिर्फ यह कर सकते हैं:

element { 
    -webkit-overflow-scrolling: touch; 
} 

element > * { 
    -webkit-transform: translateZ(0px); 
} 

Answer 2

ठीक करने के लिए वे ढीला यहाँ जाने क्या एक मैथुन पता नहीं है। समाधान के सभी तरह की कोशिश की जब तक मैं अंत में केवल संपत्ति के द्वारा के लिए तत्वों को ठीक से एक -webkit-overflow-scrolling:touch div में प्रदान की जा करने के लिए आवश्यक पाया: position: static

सापेक्ष और निरपेक्ष तैनात तत्वों हमेशा सीमा पर काट रहे हैं, और (खाली के अलावा पूरी तरह गायब अंतरिक्ष) इसके बाहर। यदि आप स्थिति से गतिशील रूप से स्थिति को बदलते हैं, स्थिर से पूर्ण तक, केवल स्क्रॉल करने योग्य div व्यूपोर्ट का दृश्य भाग प्रदान करता है, जहां ऑफसेट होता है।

Answer 3

मैं गहराई से इस बग की जांच की, मैं भी एक jsfiddle बनाया है और एक बग रिपोर्ट में एप्पल के लिए यह प्रस्तुत की। कृपया देखें: iOS5 Images disappear when scrolling with webkit-overflow-scrolling: touch जैसे ही एप्पल मेरे लिए उत्तर के रूप में, मैं इसे उस विषय पर रिपोर्ट तो आप अप करने की तारीख के लिए यह बहुत कष्टप्रद बग

Answer 4

मैं भी समस्या -webkit साथ जहां ओवरफ़्लो स्क्रॉल अनुभव के बारे में रह सकते हैं करेंगे -ओवरफ्लो-स्क्रॉलिंग सेट को स्पर्श करने के लिए सेट किए गए तत्वों के साथ समस्याओं को दोबारा शुरू करें। मेरे मामले में मेरी एक सूची थी जहां व्यक्तिगत वस्तुओं के सापेक्ष स्थिति थी ताकि मैं अपने बच्चों के तत्वों पर स्थिति का उपयोग कर सकूं। आईओएस 5 पर उपरोक्त सीएसएस के साथ, जब उपयोगकर्ता छिपी हुई सामग्री को स्क्रॉल करता था, तो तत्वों की समीक्षा करने के लिए स्क्रीन को फिर से खींचा जाने से पहले एक क्षणिक देरी हुई थी। यह वास्तव में कष्टप्रद था। सौभाग्य से मुझे पता चला है कि अगर मैंने माता-पिता नोड स्थिति को भी रिश्तेदार दिया है, तो यह हल हो गया था।

Answer 5

मैंने इस बग में भी भाग लिया है। मैं माता पिता के तत्वों के लिए निम्न सीएसएस लगाने से यह तय हो:

-webkit-transform: translate3d(0, 0, 0); 

हालांकि, मैं देखा है कि कि प्रतिपादन धीमा और अन्य इनपुट तत्व जब एक छुआ इनपुट तत्व दृश्य के मध्य में स्क्रॉल किया है की तुलना में चाहता था चुनेंगे (सफारी/आईओएस द्वारा)।

Answer 6

बग अभी भी iOS 6 में रहती है।यदि आपकी समस्या position: relative से संबंधित है, तो आप समस्या को हल कर सकते हैं z-index: 1 अस्थायी रूप से जेएस के माध्यम से। -webkit-transform: translate(...) मेरे मामले में position: relative के साथ काम नहीं किया।

Answer 7

आईओएस में, जब -webkit-overflow-scrolling: touch सेट के साथ एक तत्व के अंदर एक तत्व पूरी तरह से रखा जाता है (या fixed) स्क्रॉल कंटेनर के बाहर एक तत्व के सापेक्ष, तत्व केवल एक बार प्रदान की गई है और प्रतिपादन अपडेट नहीं होने के रूप में तत्व स्क्रॉल किया है । नमूना HTML:

<div class="relative-to-me"> 
    <div class="scrollable"> 
    <div class="absolutely-positioned"> 
    </div> 
    </div> 
</div> 

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

इस समस्या का समाधान बिल्कुल (या निश्चित) स्थित तत्व पर will-change: transform सेट करना है।

.absolutely-positioned { 
    will-change: transform; 
} 

Answer 8

मैं कुछ अलग समाधान की कोशिश की, मेरे मामले में पूरी तरह से काम नहीं लग रहा था।

अंत में मैंने पाया एक तरह से jQuery के साथ ठीक काम करता है:

जब आप को स्पर्श -webkit-अतिप्रवाह-स्क्रॉलिंग संपत्ति हर बार लागू करें। जब टचडाउन, प्रतिपादन आईओएस निष्क्रिय करने के लिए स्वत::

* पहले तो मुझे भी -webkit-अतिप्रवाह-स्क्रॉलिंग लागू होता है। लेकिन यह पेज झपकी बना दिया। तो मैंने इसे छोड़ दिया, फिर आश्चर्यजनक रूप से काम करता है!

चेक नीचे लाइनों, आशा है कि यह मदद करता है:

<!-- JQuery Functions--> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript"> 

// Apply -webkit-overflow-scrolling in Every TouchEnd 
$(document).on('click touchend', function(event) { 
    $("#TestDIV").css({"-webkit-overflow-scrolling":"touch"}); 
}); 

</script> 



<!-- html Elements & Style --> 

<div id="TestDIV"> 
    <div class="Element"></div> 
    <div class="Element"></div> 
    <div class="Element"></div> 
    <div class="Element"></div> 
    <div class="Element"></div> 
</div> 

<style> 
#TestDIV{ 
    white-space: nowrap; 
    overflow-x: scroll; 
    -webkit-overflow-scrolling:touch; 
} 

#TestDIV .Element{ 
    width:300px; 
    height:300px; 

    margin: 2px; 

    background-color: gray; 

    display: inline-block; 
} 
#TestDIV .Element:nth-child(odd){ 
    background-color: whitesmoke; 
} 
</style>