सफारी IOS मेनू बार स्क्रीन के निचले 10% में बटन के साथ संघर्ष करता है


14

मैं एक वेब-पोर्टल का निर्माण कर रहा हूं, जो कई प्लेटफार्मों पर कार्यात्मक और सुंदर होना चाहिए। प्लेटफार्मों में से एक IOS सफारी है, और यह था कि मुझे एक समस्या का सामना करना पड़ा। मेरे कोड में मैंने दो फ़्लोटिंग बटन को एक div के नीचे की चौड़ाई और 100% की ऊँचाई के साथ संरेखित किया है। यह सब ठीक काम करता है और मेरे बटन ठीक उसी तरह दिखाई देते हैं जैसे वे पृष्ठ के निचले भाग पर होते हैं। हालाँकि जब मैं बटन को मोबाइल सफारी स्विच से पूर्ण दृश्य पर क्लिक करता हूँ और मेरे बटन नीचे की नौसेना पट्टी के पीछे छिपे होते हैं!

क्या सफारी मोबाइल के लिए सामान्य व्यवहार है जब उपयोगकर्ता स्क्रीन के निचले 10% में टैप करता है, तो विस्तारित मेनू दिखाने के लिए? इससे कैसे बचा जा सकता है?

इस gif में आप IOS सिम्युलेटर पर समस्या देख सकते हैं: उदाहरण
जैसा कि आप देख सकते हैं समस्या केवल तब होती है जब कोई बटन दृश्य के निचले 10% में होता है। यह सिर्फ एक सामान्य बटन है, मेरा कोड कई डेवलपर्स द्वारा ट्रिपल चेक किया गया था और इसमें कोई त्रुटि नहीं है।


आप अपने कोड का टुकड़ा, इस ध्वज की सूची और अगर हम अतिप्रवाह ढेर की ओर पलायन कर सकते हैं ...
bmike

मैंने सफारी के लिए बग बनाया है, कृपया वहाँ टिप्पणी करें: bugs.webkit.org/show_bug.cgi?id=194235
sheerun

जवाबों:


5

यह मोबाइल सफारी में सामान्य व्यवहार है, तल पर टैप करने से विभिन्न ब्राउज़र विकल्प प्रदर्शित होंगे और वेब पेज को तदनुसार स्क्रॉल करेंगे। वेब पेज की कार्यक्षमता वैसे ही रहती है, इसलिए जो भी कार्यक्षमता है उस तक पहुंचने के लिए स्क्रॉल करने के बाद भी उपयोगकर्ता बटन पर टैप कर सकता है।


4
धन्यवाद पैट्रिक्स, मुझे पता है कि यह सामान्य है, लेकिन क्या html, css या js के माध्यम से इस व्यवहार को ओवरराइड करने का एक तरीका है? मैंने इस सवाल को स्टैक ओवरफ्लो पर पहले ही पोस्ट कर दिया है, लेकिन चूंकि यह ऐप्पल से संबंधित कुछ है, इसलिए शायद अलग-अलग तरीके से पता चल जाएगा
डेनिस्म्यूज

1
StackOverflow (या यहां तक ​​कि एक एसई साइट जहां वेब डेवलपर्स हैंग हो जाते हैं) एडी की तुलना में इस तरह की चीज के लिए बेहतर है (जो अंत उपयोगकर्ता मुद्दों पर केंद्रित है)। जैसा कि ब्राउज़र नियंत्रण तक पहुंचना उपयोगकर्ता के लिए किसी तरह आवश्यक है मुझे संदेह है कि क्या व्यवहार से बचने का एक तरीका है।
nohillside

इसके लिए स्टैक ओवरफ्लो q & के लिए लिंक?
बेन रॉबर्ट्स

7

मुझे लगता है कि मुझे जवाब मिल गया होगा। निम्नलिखित शैलियों के लिए अपनी सामग्री सेट करना:

  • height: 100% (सामग्री को व्यूपोर्ट भरने और नीचे से आगे जाने की अनुमति देता है)
  • overflow-y: scroll(आपको व्यूपोर्ट के नीचे स्क्रॉल करने की अनुमति देता है; डिफ़ॉल्ट मान है visible)
  • -webkit-overflow-scrolling: touch (किसी भी स्क्रॉल व्यवहार को सुचारू बनाने के लिए)

सफारी में आईओएस मेनू को हमेशा प्रकट करने के लिए मजबूर करने के लिए प्रकट होता है। इस तरह, बटन क्लिक वास्तव में सफारी मेनू को खोलने के बजाय काम करेंगे। उम्मीद है की यह मदद करेगा!


ज़रूर, यह काम करता है, लेकिन सभी साइटें overflow-y: scrollअपने मुख्य सामग्री क्षेत्र पर सेटिंग को बर्दाश्त नहीं कर सकती हैं । इस हैक के साइड इफेक्ट्स हैं जो सभी बच्चों के तत्वों को प्रभावित करेंगे। इसे अधिक सही ढंग से रखने के लिए, ये सीएसएस गुण सभी बच्चों के तत्वों पर सीधे प्रभाव डालते हैं और सफारी मेनू को दिखाने के लिए मजबूर करना वास्तव में दुष्प्रभाव है।
zevdg

धन्यवाद। अभी तक स्क्रीन के नीचे की ओर टैप करने की कोशिश नहीं की गई है, लेकिन मेरे डिजाइन का कम से कम 10% सफारी के अप्रिय मेनू बार द्वारा कवर नहीं किया जा रहा है। इसे जोड़ने के लिए, आपको प्रत्येक तत्व height: 100%को भी देना होगा। ऐसी कंपनी के लिए जो मोबाइल उपकरणों से अपना बहुत पैसा कमाती है, उनका मोबाइल वेब अनुभव भयानक है।
सेरिटेरिमोनस
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.