यह केवल iPhone के आकार की Safari में होता है। मुझे पता है कि इस मुद्दे के लिए "सामान्य समाधान" लागू करना है -वेबकिट-ट्रांसफॉर्म: ट्रांसलेशन 3 डी (0,0,0); (सर्ज के जवाब के अनुसार यहां) और इससे समस्या ठीक हो जाती है, लेकिन केवल एक बार।

समस्या "दराज" मेनू के साथ होती है जो तब खुलता है जब उपयोगकर्ता मेनू बटन पर क्लिक करता है। मेनू सामान्य रूप से दिखाई देगा, लेकिन जब इसे एक उंगली से छुआ/स्क्रॉल किया जाता है, तो पूरा मेनू पृष्ठ से गायब हो जाता है। -webkit-transform: translate3d(0,0,0) लागू करने से समस्या ठीक हो जाती है, लेकिन केवल पहली बार। यदि मेनू बंद हो जाता है और फिर से खोला जाता है, तो समस्या फिर से प्रकट होती है। मैंने पुष्टि की है कि -webkit-transform: translate3d(0,0,0) संपत्ति अभी भी मेनी पर है (हालाँकि इसे सफारी डेवलपर टूल में धूसर कर दिया गया है- धूसर हो गया है, इसके माध्यम से जाने वाली रेखा के साथ पार नहीं किया गया है)।

मैंने पृष्ठ पर कुछ जावास्क्रिप्ट जोड़ा ताकि जब मेनू खोला जाए, तो यह -webkit-transform: translation3d... संपत्ति को मेनू पर लागू करता है, और जब यह समस्या को स्थायी रूप से ठीक करता है, तो मैं इसे पर्याप्त रूप से साफ नहीं मानता एक वास्तविक फिक्स हो।

मैंने -webkit-overflow-scrolling: touch को विभिन्न संयोजनों में -webkit-transform: translate3d(0,0,0) के साथ पैरेंट एलिमेंट, चाइल्ड एलिमेंट्स, आदि पर लगाने की कोशिश की है और "पहली कोशिश" से परे समस्या को ठीक करने में सक्षम नहीं हूं।

2
jspinella 30 अप्रैल 2018, 20:55

2 जवाब

सबसे बढ़िया उत्तर

इसलिए चूंकि यह प्रसिद्ध सफारी समस्या केवल स्थिति वाले तत्वों पर होती है: रिश्तेदार, मैंने स्क्रॉल कंटेनर तत्व पर position: fixed सेट करके समस्या को ठीक करना समाप्त कर दिया। -webkit-overflow-scrolling: touch या -webkit-transform: translate3d(0,0,0) जोड़ने की जरूरत नहीं है।

जैसा कि प्रश्न भाग में बताया गया है, -webkit-transform: translate3d(0,0,0) ने समस्या को ठीक कर दिया, लेकिन केवल पहली बार मेनू खोला गया था। एक बार जब इसे बंद कर दिया गया और बिना पेज रीफ्रेश किए फिर से खोल दिया गया, तो समस्या होगी जैसे कि कोई फिक्स लागू नहीं किया गया था।

यदि आप इसी समस्या से निपट रहे हैं, तो position: fixed का उपयोग करने पर विचार करें। यदि आप इस समस्या का सामना किसी ऐसे तत्व के साथ कर रहे हैं जो उपयोगकर्ता द्वारा दिखाया और छुपाया गया है (जैसे हैमबर्गर मेनू), तो आपको पैरेंट स्क्रॉल कंटेनर पर स्थिति: निश्चित सेट करना ठीक होना चाहिए जो उपयोगकर्ता द्वारा इसे आमंत्रित करने पर दिखाया जाता है।

0
jspinella 3 मई 2018, 01:12

इसे देखने वाले किसी और के लिए एक विकल्प:

यदि आपके पास jQuery $( window ).resize(function(){}); के भीतर कोई कोड है, तो इसे स्क्रॉल पर सक्रिय किया जा सकता है। मेरे मामले में मैं एक मेनू छुपा रहा था जब खिड़की का आकार बदल दिया गया था, जो डेस्कटॉप पर ठीक काम करता था, लेकिन आईओएस सफारी में स्क्रॉल करते समय इसे भी बुलाया जा रहा था।

मुझे इस निराशाजनक, छिपे हुए मुद्दे की ओर इशारा करने के लिए इस उत्तर को श्रेय।

1
alstr 9 नवम्बर 2018, 14:07