सफारी में एकल उंगली स्क्रॉल स्क्रॉल समाप्त होने तक HTML को प्रतिपादित नहीं करता

Question

मोबाइल वेब एप्लिकेशन में मेरे पास एक div है जिसे नई फैंसी-वेबकिट-ओवरफ्लो-स्क्रॉलिंग के साथ स्क्रॉल किया जा सकता है: स्पर्श करें। एकमात्र समस्या यह है कि स्क्रॉलिंग समाप्त होने पर सामग्री केवल तभी प्रस्तुत की जा रही है। मोबाइल सफारी बनाने के लिए कोई तरीका है (और शायद अन्य मोबाइल ब्राउज़र, जैसे एंड्रॉइड में) एक ही उंगली स्क्रॉल के दौरान एचटीएमएल प्रस्तुत करते हैं?

.layer-content { 
    position: absolute; 
    top: 112px; 
    bottom: 0; 
    width: 100%; 
    background: #e6e6e6; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch;  
} 

Answer 1

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

Answer 2

स्थिति: पूर्ण प्रतिपादन के साथ गड़बड़ कर रहा है। मोबाइल सफारी उन तत्वों को प्रस्तुत नहीं करेगा जिनके पास पोजिशनिंग के लिए मानक मान नहीं है, जब तक स्क्रॉलिंग बंद नहीं हो जाती है।

यदि स्थिति ऑटो (डिफ़ॉल्ट मान) है, तो मोबाइल सफारी स्क्रॉल के रूप में तत्व प्रस्तुत करेगा।

Answer 3

आप हार्डवेयर त्वरण का उपयोग करके इसके आसपास काम कर सकते हैं। .layer-content अंदर तत्वों निम्न CSS जोड़ने का प्रयास करें:

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

Answer 4

मैं बहुत रफ़ू यकीन है कि मैं सिर्फ के साथ इस हल कर रहा हूँ:

overflow-y: auto; 

अपने स्क्रॉल तत्व है कि जोड़ें।

(संभवतः सिर्फ overflow: auto; अपनी आवश्यकताओं पर निर्भर करता है भी काम करेगा।)