फिक्स्ड मोडल्स बग में आईओएस 11 इनपुट तत्व को कैसे ठीक करें

नए रिलीज आईओएस 11 में एचटीएमएल इनपुट में एक बग उन वेबसाइटों के लिए समस्याएं पैदा कर रहा है जिनमें फिक्स्ड कंटेनर में इनपुट तत्व हैं। यहां क्या हो रहा है और कुछ संभावित कामकाज यहां है।फिक्स्ड मोडल्स बग में आईओएस 11 इनपुट तत्व को कैसे ठीक करें

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

यह हमारे लिए एक महत्वपूर्ण समस्या थी क्योंकि हमारी मूल कार्यक्षमताओं में से एक एक निश्चित मोडल संवाद के माध्यम से उपयोगकर्ता इनपुट पर निर्भर करता है।

.modal खुले:

स्रोत

2017-10-04 Amjad Jafar

मैं अगर यह बिल्कुल वैसा ही जिस समस्या का सामना कर रहे हैं, लेकिन यह समाधान मेरे लिए काम किया यकीन नहीं है {स्थिति: तय;}

iOS 11 Safari bootstrap modal text area outside of cursor

स्रोत

2017-10-09 20:33:09

मैं एक ही मुद्दा है, मेरा उत्तर पर एक नज़र था, शायद यह तुम्हारी मदद करेगा: https://stackoverflow.com/a/46954486/8775824

स्रोत

2017-10-26 12:42:26 Dan

यह समाधान मुझे मदद की IOS11 इनपुट समस्या को ठीक करने के लिए: https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x

यह भी कष्टप्रद पृष्ठभूमि स्क्रॉल ठीक करता है, जब आप मोडल :)

सारांश अंदर स्क्रॉल करने के लिए प्रयास करें: आप स्थिति जोड़ें: शरीर के लिए तय हो गई, नकदी खिड़की पृष्ठ शीर्ष पर आंदोलन को रोकने के लिए पॉपअप बंद होने के बाद .pageYOffset और क्रैश स्थिति पर स्क्रॉल करें।

स्रोत

2017-11-03 10:10:51

मेरे पास fixed हेडर/बैनर तत्व के अंदर लॉगिन फ़ॉर्म के साथ यह आईओएस बग था। लॉगिन फॉर्म के साथ मोडल विंडो खोलने के लिए हेडर के अंदर button है। वास्तविक मोडल विंडो absolute स्थित है, लेकिन हेडर/बैनर तत्व fixed है।

मैंने कोड की कुछ पंक्तियों के साथ इसे काफी आसान बना दिया। तो मैं जो कर रहा हूं वह यह है कि मैं fixed कंटेनर absolute पर बदल रहा हूं, लेकिन केवल जब लॉगिन फॉर्म खुला है, तो यह जादू को इनपुट मार्कर के साथ बनाता है।

jQuery:

$('.ios #mob-login').on('click', function(){ 
    $('body').toggleClass('login-open'); 
});

सीएसएस:

.ios body.login-open #banner-wrapper { 
    position: absolute; 
}

तो अब तय हैडर पूर्ण हो जाता है। यदि यह आईओएस है और केवल जब लॉगिन बॉक्स खुला है।

यदि आपको ऐसी ही समस्याएं हैं तो यह आपकी समस्या का समाधान कर सकता है।

Ps। कक्षा नाम ios/ios11 से <html> या इसी तरह के लिए आपको एक स्क्रिप्ट की आवश्यकता है, लेकिन मैं इस पोस्ट में उसमें नहीं जा रहा हूं। आप वहां के लिए कई समाधान पा सकते हैं।

स्रोत

2017-11-17 12:00:32 JoakimB

अब के लिए कोई इसके लिए सही समाधान नहीं है।दो अस्थायी विकल्प:

संवाद बदलें/मोडल position: absolute लिए (अनुशंसित नहीं)
कोशिश स्क्रॉल जब मोडल/संवाद खुले पृष्ठभूमि को हटा दें और जब संवाद पास यह बहाल करने के लिए। विकल्प 2 के लिए

विवरण: उदाहरण के लिए, यदि आप अपने जड़ div वापस overflowY='' जब संवाद बंद सेट कर सकते हैं (या जो भी है कि एक स्क्रॉलबार है) overflowY='hidden' के रूप में जब संवाद खोलता है, और इसे बदलने के।

ओएस/ब्राउज़र पता लगाने के लिए जब ट्रिगर फिक्स, अन्यथा आप शायद समस्या IE में सामना करेंगे याद है:

नोट: (ड्राबैक ब्राउज़र शीर्ष पर जब आप खुले संवाद/मोडल स्क्रॉल किया जाएगा)। इस समस्या के बारे में नवीनतम अपडेट प्राप्त करने के लिए
this thread का पालन करें।

स्रोत

2017-11-18 09:32:40 Ming

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

पहले एक ही मुद्दा। 'स्थिति सेट करके भी तय किया गया: पूर्ण' – iplus26

इस प्रयास करें यह मदद मिल सकती है आप

//HTML 
<head> 
    <style> 
      .ios-11-body-fixed { 
      position: fixed; 
      width: 100%; 
      } 
    </style> 
</head> 

//jQuery 
$("#leadgen-modal").on('show.bs.modal', function() { 
    $('body').addClass('ios-11-body-fixed'); 
}); 
$('#leadgen-modal').on('hidden.bs.modal', function() { 
      $('body').removeClass('ios-11-body-fixed'); 
});

स्रोत

2017-12-19 09:41:11

सहायता के लिए धन्यवाद! लेकिन मेरे परिदृश्य में यह 100% काम नहीं करता है क्योंकि मेरे पास बहुत लंबे गतिशील पृष्ठ हैं और जब आप शरीर को 'स्थिति: निश्चित' जोड़ते हैं तो यह हर बार शीर्ष पर स्क्रॉल करता है, किसी भी तरह से मैंने स्क्रॉल टॉप में गतिशील ऊंचाई जोड़ने के साथ कैसे प्रबंधित किया है ' jquery 'फ़ंक्शन, लेकिन यह कुछ परिदृश्यों में भी विफल रहा। –

यह समाधान मुझे मदद की किसी भी आईओएस मॉडल में ठीक करने के लिए।

पहली बात इस कोड के साथ केवल आईओएस डिवाइस को लक्षित करती है।

//target ios 
var isMobile = { 
    iOS: function() { 
     return navigator.userAgent.match(/iPhone|iPad|iPod/i); 
    } 
} 
if(isMobile.iOS()) { 
     jQuery('body').addClass('apple-ios'); 
}

फिर अपने सीएसएस में इस कोड डाल: आप वर्डप्रेस और कैश प्लगइन का उपयोग कर रहे हैं, तो

body.apple-ios.modal-open { 
    position: fixed; 
    width:100%; 
}

, आप सभी कैश खाली करने की जरूरत है।

आशा है कि यह आपकी मदद करेगा।

स्रोत

2018-03-07 07:21:27

फिक्स्ड मोडल्स बग में आईओएस 11 इनपुट तत्व को कैसे ठीक करें

उत्तर

संबंधित मुद्दे