iPad सफारी स्क्रॉलिंग के कारण HTML तत्व गायब हो जाते हैं और देरी से पुन: प्रकट होते हैं

165

मैं वर्तमान में iPad सफारी के लिए html5 और jQuery का उपयोग करके एक वेब ऐप विकसित कर रहा हूं। मैं एक समस्या में चल रहा हूं, जिसमें बड़े स्क्रॉल क्षेत्र उन तत्वों का कारण बनते हैं जो एक विलंब के बाद दिखाई देते हैं जब मैं उन्हें नीचे स्क्रॉल करता हूं।

इसका क्या मतलब है, अगर मेरे पास छवियों की एक पंक्ति है (या यहां तक कि एक ढाल के साथ एक div) जो ऑफस्क्रीन है, जब मैं इसे नीचे (या ऊपर) स्क्रॉल करता हूं, तो अपेक्षित व्यवहार तत्व के रूप में स्क्रीन पर दिखाई देने के लिए है मैं इसे स्क्रॉल कर रहा हूं।

हालाँकि, मैं जो देख रहा हूं वह यह है कि तत्व तब तक प्रकट नहीं होता जब तक मैं स्क्रीन से अपनी उंगली नहीं हटाता और स्कोरर अपने सभी एनिमेशन समाप्त कर देता है।

यह मेरे लिए एक सुपर ध्यान देने योग्य समस्या पैदा कर रहा है, जिससे पूरी बात तड़क-भड़क वाली है, हालांकि यह नहीं है। मुझे लगता है कि iPad सफारी स्मृति को बचाने के लिए कुछ करने की कोशिश कर रहा है। क्या कोई ऐसा तरीका है जिससे मैं इस तड़के-नेस को होने से रोक सकता हूं। इसके अतिरिक्त, मैं यह भी सराहना करूंगा कि अगर कोई आईपैड सफारी वास्तव में करने की कोशिश कर रहा है, तो उस पर प्रकाश डाला जा सकता है।

— codeBearer
स्रोत

इस समस्या / समाधान ने मुझे jPanelMenu 1.3 CSS ट्रांसफ़ॉर्म संस्करण के साथ एक समस्या को ठीक करने में मदद की, जिसने उपरोक्त स्निपेट को जोड़ने तक मेरी साइट पर सब कुछ बदल दिया।

— 75 वें ट्रॉम्बोन

2

* का उपयोग करते हुए: (html) आपकी साइट के अन्य सभी पहलुओं पर ट्रांसलेशन 3 डी लागू नहीं करेगा और मैं अनुशंसा नहीं करता। इससे टैब में छवियां गायब हो जाएंगी जैसे ही आप नीचे स्क्रॉल करते हैं, आदि, बग जिन्हें आप अपनी 3 डी छवियों को देखने के लिए उपयोग कर सकते हैं, अब आपकी साइट के अन्य पहलुओं में मौजूद होंगे।

— जोनाथन टिपन

1

मेरे पास कुछ <svg>तत्व थे जो समान विलंबित ड्राइंग / प्रतिपादन का प्रदर्शन कर रहे थे। दुर्भाग्य से, *:not(html) { ... }@JonathanTonge ने बताया कि सभी तरह के अजीब व्यवहार हो सकते हैं। हालाँकि, केवल <svg>तत्वों का चयन करने और उपयोग translate3d(0, 0, 0,);करने से मेरी स्क्रॉलिंग समस्या हल हो गई है।

— जेफायर मे

बहुत विशिष्ट उपयोग के मामलों को छोड़कर, यह कचरा है। वास्तव में लेआउट को गड़बड़ करता है जो पूर्ण स्थिति तत्वों पर निर्भर करता है।

— स्टॉटी

2

कृपया उत्तरों को उत्तर के रूप में पोस्ट करें, आपके प्रश्न में "EDIT" नहीं। मुझे पता है कि आपको अपना उत्तर सबसे अच्छा लगता है, और यह ठीक है, लेकिन StackOverflow में एक Q & A प्रारूप है जो Q के A से भिन्न होने पर सबसे अच्छा काम करता है।

— स्लिप डी। थॉम्पसन

184

आपको हार्डवेयर त्वरण का उपयोग करने के लिए ब्राउज़र को अधिक प्रभावी ढंग से ट्रिक करने की आवश्यकता है। आप एक खाली 3 डी परिवर्तन के साथ ऐसा कर सकते हैं:

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

विशेष रूप से, आपको उन बाल तत्वों पर इसकी आवश्यकता होगी जिनके पास एक position:relative;घोषणा है (या, बस सभी बाहर जाएं और इसे सभी बाल तत्वों के लिए करें)।

गारंटीशुदा फिक्स नहीं, लेकिन ज्यादातर समय काफी सफल रहा।

हैट टिप: https://web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

— कॉलिन विलियम्स
स्रोत

3

मैंने भी यही कोशिश की। अफसोस की बात है, एक Translate3d जोड़ना उन तत्वों को काट रहा है जो पहले ठीक से प्रदर्शित किए जा रहे थे। मुझे कुछ ऐसे ऑब्जेक्ट्स के लिए हार्डवेयर त्वरण की भी आवश्यकता थी जो ऑफ़स्क्रीन थे और उन्हें स्क्रीन पर "फ्लाई" में एनिमेटेड होना था। मैं jQuery के चेतन () का उपयोग कर रहा था, जो सुपर स्लो था। मैंने हार्डवेयर त्वरण का उपयोग करने के लिए स्विच किया। हालाँकि इसने एनीमेशन को जन्म दिया, लेकिन इसने अनिश्चित परिणाम उत्पन्न किए, इस अर्थ में कि माता-पिता के कुछ बच्चे तत्व (एनिमेशन) को काट दिया गया था। यह तब नहीं हो रहा था जब मैं चेतन () का उपयोग कर रहा था।

— कोडबियर

1

@ कोलिन विलियम्स आपने अभी-अभी मेरा दिन बनाया है! : डी

— ल्यूक

9

वाह, यह भयानक लेकिन प्रभावी है। धन्यवाद।

— टिम डाउन

लिंक टूट गया है। नया लिंक: cantina.co/thought_leadership/… कैश्ड: web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/…

— thinsoldier

1

सोने का फकीर सितारा आदमी! मैंने इसे स्क्रॉल करने योग्य div में अपने सभी ली तत्वों को जोड़ा। Poof। काम किया।

— ब्रायन जॉनसन

68

यह मेरे सवाल का पूरा जवाब है। मैंने मूल रूप से @ कोलिन विलियम्स के उत्तर को सही उत्तर के रूप में चिह्नित किया था, क्योंकि इससे मुझे पूर्ण समाधान प्राप्त करने में मदद मिली। एक समुदाय के सदस्य, @ स्लीप डी। थॉम्पसन ने मेरे सवाल का संपादन किया, लगभग 2.5 साल बाद मुझे यह पूछा, और मुझे बताया कि मैं SO के प्रश्नोत्तर प्रारूप का दुरुपयोग कर रहा था। उन्होंने मुझे उत्तर के रूप में अलग से पोस्ट करने के लिए भी कहा। तो यहाँ पूरा जवाब है कि मेरी समस्या का हल है:

@ कोलिन विलियम्स, धन्यवाद! आपका जवाब और आपके द्वारा जुड़ा लेख मुझे सीएसएस के साथ कुछ करने की कोशिश करने के लिए प्रेरित करता है।

इसलिए, मैं इससे पहले Translate3d का उपयोग कर रहा था। इसने अवांछित परिणाम उत्पन्न किए। मूल रूप से, यह बंद हो जाएगा और RENDER तत्वों को ऑफ़स्क्रीन नहीं था, जब तक कि मैंने उनके साथ बातचीत नहीं की। इसलिए, मूल रूप से, परिदृश्य अभिविन्यास में, मेरी साइट का आधा हिस्सा जो ऑफ़स्क्रीन था, वह नहीं दिखाया जा रहा था। यह एक iPad वेब ऐप है, जिसकी वजह से मैं ठीक था।

अपेक्षाकृत तैनात तत्वों में Transl3d को लागू करने से उन तत्वों के लिए समस्या हल हो गई, लेकिन अन्य तत्वों ने एक बार ऑफस्क्रीन बंद कर दिया। जब तक मैं पृष्ठ को पुनः लोड नहीं करता, तब तक मैं (कलाकृति) के साथ बातचीत नहीं कर सकने वाले तत्वों को फिर से कभी प्रस्तुत नहीं कर सकता।

पूरा समाधान:

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

अब, हालांकि यह सबसे "कुशल" समाधान नहीं हो सकता है, यह केवल एक ही था जो काम करता है। मोबाइल सफारी उन तत्वों को रेंडर नहीं करता है जो ऑफस्क्रीन हैं, या कभी-कभी उपयोग करते समय गलत तरीके से प्रस्तुत करते हैं -webkit-overflow-scrolling: touch। जब तक कोई अन्य सभी तत्वों के लिए एक Translate3d लागू नहीं होता है जो उस स्क्रॉल के कारण ऑफ़स्क्रीन जा सकते हैं, स्क्रॉल करने के बाद उन तत्वों को काट दिया जाएगा।

तो, फिर से धन्यवाद, और आशा है कि यह कुछ अन्य खोई हुई आत्मा की मदद करता है। इससे मुझे निश्चित रूप से बड़ी मदद मिली!

— codeBearer
स्रोत

2

वाह। इसके लिए धन्यवाद। इसने मुझे मेरे फोनगैप / कॉर्डोवा ऐप के लिए भारी मात्रा में सिरदर्द से बचाया। मेरे मामले में मुझे बदलना *:not(html)थाbody *

— anon

9

सिर्फ -webkit-transform: translate3d(0, 0, 0);समस्या तत्व पर लागू करने के लिए मेरे लिए काम किया। मेरे मामले में मैं

— फिडेव

इसमें से किसी ने भी मेरे लिए काम नहीं किया। जैसे ही मैं एक निश्चित बिंदु पर स्क्रॉल करता हूं, खिड़की के ऊपर कोई भी दिखाई देने वाला सामान मुंग नहीं हो जाता है, साथ ही व्यूपोर्ट में कुछ तत्व दिखाई देते हैं। मैं एक बहुत ही मामूली लेकिन अचूक "झटका" नोटिस करता हूं, जबकि यह स्क्रॉल होता है जिसके बाद तत्व ठीक हो जाते हैं। (यानी: चिकनी - चिड़चिड़ा - चिकना व्यवहार, जैसे कि स्क्रॉलिंग के दौरान हिचकी आ रही है।) यह iPad पर है।

— cbmtrx

BTW मैं सिर्फ एक iPad एयर 2 पर पता चला है, जब एक विशिष्ट ऑन-स्क्रीन तत्व (एक नेबर, इस मामले में) स्क्रीन बंद हो जाता है, डिवाइस "ब्लॉक" को फिर से लोड करता है - केवल बड़े संस्करण का उपयोग करके, मूल माध्यम से नहीं उस पृष्ठ के साथ भरी हुई है। क्या ...

— cbmtrx

मामले में किसी को भी मेरे जैसे ही अजीब अनुभव हो रहा है - जो इस पृष्ठ पर वर्णित है से थोड़ा अलग है - मैंने पाया कि jQuery के $(window).width()बजाय का उपयोग करके window.innerWidthiOS के लिए सभी अंतर बना दिया है। कौन जाने।

— cbmtrx

13

सभी तत्वों को लक्षित लेकिन html: *:not(html) मेरे मामले में अन्य तत्वों की समस्याओं का कारण बना। इसने स्टैकिंग संदर्भ को संशोधित किया, जिससे कुछ z- इंडेक्स टूट गए।

हमें सही तत्व को लक्षित करने के लिए बेहतर प्रयास करना चाहिए और -webkit-transform: translate3d(0,0,0)उस पर ही अमल करना चाहिए।

संपादित करें: कभी-कभी translate3D(0,0,0)काम नहीं करता है, हम निम्न विधि का उपयोग कर सकते हैं, सही तत्व को लक्षित कर सकते हैं:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

— गिलौम गौटियर
स्रोत

मैं उसी मुद्दे का सामना कर रहा था। आप body *इसके बजाय चयनकर्ता का उपयोग कर सकते हैं *:not(html)। यह आपको समस्या को हल करेगा।

— कुणाल

सुझाव के लिए

— कुदौस

7

जब Translate3d काम नहीं करता है, तो परिप्रेक्ष्य जोड़ने की कोशिश करें। यह हमेशा मेरे लिए काम करता है

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

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

— फेलिप लीमा
स्रोत

पवित्र ग $ # @ अंत में कोणीय / आयनिक के लिए एक समाधान। -webkit-perspective: 1000;

— lilbiscuit

आह मेरे दिन बच गए। आपके लिए +1;)

— उमर बाहिर

इससे मेरा iOS ब्राउज़र क्रैश हो गया।

— एंड्रियास रिक्टर

-webkit-perspective: 1000;मेरे लिए यह किया - शुक्रिया

— jilsscher

2

-webkit-transform: translate3d(0,0,0)एक तत्व को सांख्यिकीय रूप से जोड़ना मेरे लिए काम नहीं करता है।

मैं इस संपत्ति को गतिशील रूप से लागू करता हूं। उदाहरण के लिए, जब कोई पृष्ठ स्क्रॉल किया जाता है, तो मैं -webkit-transform: translate3d(0,0,0)एक तत्व पर सेट करता हूं । फिर थोड़ी देरी के बाद, मैंने इस संपत्ति को रीसेट कर दिया, अर्थात -webkit-transform: none यह दृष्टिकोण काम करने लगता है।

धन्यवाद, @ कोलिन विलियम्स मुझे सही दिशा में इंगित करने के लिए।

— अलेक्जेंडर पोलशुक
स्रोत

इस संकेत ने मेरी बहुत मदद की, क्योंकि इन शैलियों ने कुछ अवांछित दुष्प्रभावों को कम किया है, इसलिए मैं आमतौर पर बचना चाहता हूं। इसलिए मैं उन्हें जोड़ने और हटाने के लिए टचस्टार्ट / टचेंड घटनाओं का उपयोग करता हूं। धन्यवाद!

— विंडवॉकर

1

मैं ios7 पर iscroll 4.2.5 के साथ एक ही मुद्दा था। पूरे स्क्रॉल तत्व बस गायब हो जाते हैं। मैंने जोड़ने का प्रयास किया है translate3d(0,0,0)जैसा कि यहाँ सुझाया गया है, इसने समस्या को हल कर दिया है, लेकिन इसने इस्क्रोल "स्नैप" प्रभाव को निष्क्रिय कर दिया है। समाधान "position:relative; z-index:1000;display:block"पूरे कंटेनर में सीएसएस गुण देने के साथ आया था जो स्क्रॉल तत्व रखता है और बाल तत्वों को Transl3d देने की कोई आवश्यकता नहीं है।

— yudarik
स्रोत

मैंने एंड्रॉइड क्रोम पर इसी तरह की समस्या को हल करने के लिए इस तकनीक का उपयोग किया। जब मैंने ट्रांसलेशन 3 डी फिक्स करने की कोशिश की तो वर्टिकल स्क्रॉलिंग बेहतर प्रदर्शन कर रही थी। मेरे मामले में <body>तत्व, जो मैंने स्क्रॉल करने के लिए उपयोग किया है और एक सरलीकृत संस्करण ने काम किया है:body { position: relative; z-index: 0; }

— BumbleB2na

1

समय पर translate3dकाम नहीं हो सकता है, उन मामलों perspectiveमें इस्तेमाल किया जा सकता है

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

— निधिन जोसेफ
स्रोत

0

मुझे पूरा यकीन है कि मैंने इसे अभी हल किया है:

overflow-y: auto;

(संभवत: बस overflow: auto;आपकी जरूरतों के आधार पर भी काम करेगा।)

— डेविड नोटिक
स्रोत

इसने मेरे लिए कुछ नहीं किया, जबकि स्वीकृत उत्तर ने शायद ऐसा ही एक अलग परिदृश्य किया

— टोनी

0

ऐसे मामले हैं जहां एक रोटेशन लागू किया जाता है और / या एक जेड इंडेक्स का उपयोग किया जाता है।

रोटेशन : एक -webkit-transformतत्व को घुमाने के लिए एक मौजूदा घोषणा भी उपस्थिति समस्या (जैसे -webkit-transform: rotate(-45deg)) से निपटने के लिए पर्याप्त नहीं हो सकती है । इस मामले में आप -webkit-transform: translateZ(0px) rotateZ(-45deg)एक चाल के रूप में उपयोग कर सकते हैं ( दिमाग घुमाएं जेड )।

जेड इंडेक्स : रोटेशन के साथ आप एक सकारात्मक z-indexसंपत्ति को परिभाषित कर सकते हैं, जैसे z-index: 42। "रोटेशन" के तहत वर्णित उपरोक्त चरण मेरे मामले में पर्याप्त थे, इस मुद्दे को हल करने के लिए, यहां तक कि खाली के साथ भी translateZ(0px)। मुझे हालांकि संदेह है कि इस मामले में जेड इंडेक्स पहले स्थान पर गायब होने और फिर से प्रकट होने का कारण हो सकता है । किसी भी मामले में z-index: 42संपत्ति को रखने की आवश्यकता है - -webkit-transform: translateZ(42px)केवल पर्याप्त नहीं है।

— स्टीफन जुरफ्लुह
स्रोत

0

यह डेवलपर्स द्वारा सामना की जाने वाली एक बहुत ही आम समस्या है और इसका मुख्य कारण उनके द्वारा Safari'sपरिभाषित तत्वों को दोबारा न बनाए जाने की संपत्ति है position : fixed।

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

link1

link2

— Arqam
स्रोत

0

मेरे मामले में (एक iOS Phonegap ऐप), रिश्तेदार बच्चे के तत्वों के लिए Translate3d को लागू करने से समस्या हल नहीं हुई। मेरे स्क्रॉल करने योग्य तत्व में एक सेट ऊँचाई नहीं थी क्योंकि यह पूरी तरह से तैनात था और मैं शीर्ष और नीचे के पदों को परिभाषित कर रहा था। मेरे लिए यह तय है कि एक मिनट की ऊंचाई (100px की) जोड़ी गई थी।

— b4tch
स्रोत

0

मेरे पास फ़ैन्सीबॉक्स के पुराने संस्करण का उपयोग करने का एक ही मुद्दा था। V3 में अपग्रेड करने से आपकी समस्या दूर हो जाएगी या आप बस जोड़ सकते हैं:

html, body {
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

— एडम तूहो
स्रोत

0

मुझे फ्रेमवर्क 7 और कॉर्डोवा परियोजना में इस समस्या का सामना करना पड़ा। मैंने ऊपर दिए गए सभी समाधानों की कोशिश की। उन्होंने मेरी समस्या का समाधान नहीं किया।

मेरे मामले में, मैं अनंत घुमाव (परिवर्तन) के साथ एक ही पृष्ठ पर 10+ सीएसएस एनिमेशन का उपयोग कर रहा था। मुझे एनिमेशन को हटाना था। कुछ दृश्य सुविधाओं की कमी के साथ यह ठीक है।

यदि उपरोक्त समाधान आपकी मदद नहीं करते हैं, तो आप कुछ एनिमेशन को समाप्त करना शुरू कर सकते हैं।

— yavuzkirez
स्रोत

0

-webkit-transform: translate3d(0, 0, 0);चाल मेरे लिए काम नहीं किया। मेरे मामले में मैंने एक अभिभावक को निर्धारित किया था:

// parent
height: 100vh;

इसे बदलना:

height: auto;
min-height: 100vh;

किसी और की स्थिति का सामना करने की स्थिति में इस मुद्दे को हल किया।

— funador
स्रोत

0

मेरे मामले में, CSS ने समस्या को ठीक नहीं किया। मैंने jQuery के एक बटन को फिर से प्रस्तुत करते हुए समस्या पर ध्यान दिया।

$("#myButton").html("text")

इसे इस्तेमाल करे

$("#myButton").html("<span>text</span>")

— जोश स्टोवाल
स्रोत