गलत अक्ष पर IOS -webkit-overflow-scrolling scrolls, या सभी

Question

पर नहीं, मैं HTML5 के साथ आईओएस के लिए एक मोबाइल ऐप बना रहा हूं। मैं मूल जड़ता स्क्रॉलिंग प्राप्त करने के लिए "-webkit-overflow-scrolling: touch" का उपयोग कर रहा हूं, लेकिन यह बहुत छोटी है। मैंने स्क्रॉलिंग बंद होने तक सामग्री को प्रस्तुत नहीं किया है, लेकिन एक लगातार बग यह है:

जब मैं ऊपर और नीचे स्क्रॉल करने का प्रयास करता हूं, कुछ भी नहीं होता है, लेकिन जब मैं क्षैतिज स्क्रॉल करने का प्रयास करता हूं, तो सामग्री स्क्रॉल करती है लंबवत (अक्ष से 9 0 डिग्री)। अगर मैं अपने ऐप के चारों ओर नेविगेट करता हूं और पेज पर वापस आ जाता हूं, तो इसे कभी-कभी तय किया जाएगा। साथ ही, सामग्री से भरे होने के बावजूद, कभी-कभी यह बिल्कुल भी स्क्रॉल नहीं करेगा।

जो मैंने गुमराह किया है, उससे आम सहमति यह प्रतीत होती है कि ऐप्पल इस बग से अवगत है, और जल्द ही इसे ठीक करने का कोई इरादा नहीं है। क्या किसी को सही तरीके से काम करने के लिए -webkit-overflow-scrolling प्राप्त करने का समाधान मिला है?

Answer 1

मैंने महीनों के लिए इस बग के साथ भी संघर्ष किया है। सबसे अच्छा लक्षण वर्णन है कि मैंने पाया है:

https://bugs.webkit.org/show_bug.cgi?id=87391

जो कहते हैं कि ऐसा होता है कि जब पेज एक iFrame है और सामग्री जावास्क्रिप्ट से स्थापित कर रहे हैं। The Graphics Codex version 1.6 में मेरा वर्तमान वर्कअराउंड टच स्क्रॉलिंग का उपयोग करने के बजाय पृष्ठ को स्पष्ट रूप से स्क्रॉल करने के लिए iScroll4 का उपयोग करना है। चूंकि जावास्क्रिप्ट एकल-थ्रेडेड है, इसलिए यदि आप एनीमेशन या पृष्ठभूमि लोडिंग सामग्री भी कर रहे हैं तो यह धीमा हो सकता है।

Answer 2

मुझे एक ही समस्या का सामना करना पड़ा: -webkit-overflow-scrolling: scroll का उपयोग करके एक नोड जो बाएं/दाएं स्क्रॉल जेस्चर के साथ केवल ऊपर/नीचे स्क्रॉल करेगा।

यहाँ मैं होने के लिए संभावित कारणों क्या मिला है: पृष्ठ पर

• आइफ्रेम वर्तमान कहीं भी, दृश्य या अन्यथा (source)
• visibility: hidden स्क्रॉल नोड की कोई मूल करने के लिए लागू (source)

हालांकि, इनमें से कोई भी परिस्थिति मेरे वेब ऐप में मौजूद नहीं थी। मेरे पास एक शुद्ध सीएसएस मोडल संवाद के अंदर एक स्क्रोल करने योग्य <ul> था जिसे मैंने लिखा था जिसमें पारदर्शी अंडरले जोड़ने के लिए एक चालाक चाल का उपयोग किया गया था - छद्म-तत्व position: fixed के साथ।

जब मैंने छद्म-तत्व से position: fixed हटा दिया, तो समस्या दूर हो गई! बेशक, इसने मेरी चतुर चाल बेकार कर दी, लेकिन यह जानना दिलचस्प था कि इस बग को इस स्थिति से ट्रिगर किया जा सकता है।

डिवाइस: 2012 आईपैड 3 आईओएस 5.1.1 (रेटिना)

अपमानजनक कोड:

/* Underlay */ 
.dialog::after { 
    z-index: -1; 
    position: fixed; /* <--- This was the problem! */ 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 

    background-color: rgba(0,0,0,0.4); 

    content: ""; 
} 

tl; डॉ: युक्त तत्वों एक निश्चित स्थिति छद्म है तो तत्व, इसे हटाने से आपकी स्क्रॉलिंग समस्या ठीक हो सकती है।

Answer 3

मुझे पता है कि यह मुद्दा पुराना है, लेकिन मुझे अपनी वेबसाइट को आईओएस 5 पर काम करना पड़ा। दुर्भाग्यवश मैं आईफ़्रेम को हटा नहीं पाया और न ही बदल सकता था। मैंने देखा है कि आईफ्रेम की उपस्थिति केवल समस्या का कारण बनती है अगर इसे उस तत्व से पहले प्रस्तुत किया गया था जो आसानी से स्क्रॉल करने के लिए आवश्यक था।बाद में दस्तावेज़ में iframe जोड़ना (तत्व के बाद -webkit-overflow-scrolling: स्पर्श) समस्या को हल किया :)