बूटस्ट्रैप 3 मोडल केवल चुनिंदा मेनू से विकल्प चुनने के बाद आईपैड सफारी पर गायब हो जाता है

Question

मेरे पास एक वेब एप्लिकेशन में पंजीकरण फ़ंक्शन है जो उपयोगकर्ता को साइट पर जानकारी जोड़ने के लिए चार-चरण प्रक्रिया के माध्यम से ले जाता है। जब कोई उपयोगकर्ता 'जोड़ें' बटन पर क्लिक करता है, तो बूटस्ट्रैप मोडल दिखाई देता है और उपयोगकर्ता चरण # 1 पर शुरू होता है।

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

सफारी में, उपयोगकर्ता मोडल खोल देगा, चरण 1 में डेटा चुनें, और चरण 2 पर जाएं। यदि उपयोगकर्ता इस ड्रॉपडाउन में कुछ भी नहीं चुनता है तो वे 3 कदम जारी रख सकते हैं। हालांकि, अगर वे एक चरण 2 में विकल्प, मोडल गायब हो जाता है और उपयोगकर्ता जारी नहीं रख सकता है। यह केवल आईपैड/आईफोन के लिए सफारी में होता है।

मैंने आईपैड पर वेब इंस्पेक्टर स्थापित करने और मैक पर कंसोल लोड करने का प्रयास किया है, लेकिन कंसोल में उपयोग की कोई त्रुटि या अन्य संदेश नहीं हैं। मैं यह पता लगाने की कोशिश कर रहा हूं कि यह सफारी में एक बग है, या यदि सफारी अन्य ब्राउज़रों की तुलना में एक अलग टैग से मोडल इनपुट को संभालती है।

Answer 1

क्या डेवलपर मित्र एक नज़र डालें।

jQuery.usingSafari = function(allowDevices){ 
allowDevices = allowDevices != undefined ? allowDevices : true; 
if(!allowDevices){ 
    return /iPhone|iPad|iPod|Safari/i.test(navigator.userAgent) 
     && navigator.userAgent.indexOf('Chrome') == -1 
     && navigator.userAgent.indexOf('iPhone') == -1 
     && navigator.userAgent.indexOf('iPad') == -1 
     && navigator.userAgent.indexOf('iPod') == -1; 
} else{ 
    var results = /iPhone|iPad|iPod|Safari/i.test(navigator.userAgent) && navigator.userAgent.indexOf('Chrome') == -1; 
    return results; 
} 

}

//Disable backdrop 
if(jQuery.usingSafari(false)) { 
document.write('<style>div.modal-backdrop{ display:none; }</style>'); 

}

और फिर मोडल कॉल:

jQuery('#player-lightbox').modal({ 
      backdrop: jQuery.usingSafari(true) ? "static" : true, 
      show:true} 
     ); 

यह समस्या ठीक हो गई है लगता है वह इस समारोह गयी। उम्मीद है कि यह दूसरों की मदद करता है!

Answer 2

ऐसा लगता है कि यह fade संक्रमण के कारण होता है। मैंने पहली बार पता लगाया कि ऐप आईओएस पर चलता है, फिर .modal तत्वों के लिए एक क्वेरी बनाई और कक्षा fade हटा दी। इसने आईपैड/आईफोन पर इस मुद्दे को हल किया। नोट: वर्चुअल कीबोर्ड पॉप-इन और आउट के साथ उस प्ले को अच्छा बनाने के लिए मॉडल बैकड्रॉप को कुछ अतिरिक्त प्रयासों की आवश्यकता हो सकती है।

इसे समझने के लिए:

if(isIOS()) 
    $('.modal').removeClass('fade'); 

संपादित करें: आईपैड (क्षैतिज) भी आवश्यक

$('.modal').on('shown.bs.modal', function() { 
    $(this).find('.modal-backdrop').css('position', 'absolute'); 
}); 

Answer 3

मैं एक कंटेनर के अंदर एक droplist है कि एक का चयन करने पर गायब हो गया था के साथ एक समान मुद्दा था और यह था केवल एक वास्तविक आईपीएडी डिवाइस पर हो रहा है (क्रोम डब्ल्यू/डिवाइस टूलबार में जांच 'आईपीएडी' के साथ चयनित ठीक काम किया)। यह उपरोक्त टिप्पणी में उल्लिखित एक ज्ञात बग प्रतीत होता है।

स्थिति में कंटेनर के लिए सीएसएस बदलना: पूर्ण मेरे लिए समस्या का समाधान किया। हालांकि यह अन्य उपकरणों & व्यूपोर्ट्स के लिए लेआउट तोड़ देगा।

ठीक संशोधित सीएसएस नियम के साथ केवल iPads लक्षित करने के लिए किया गया था:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { 
    .your-container { 
    position: absolute; 
    } 
} 
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) { 
    .your-container { 
    position: absolute; 
    } 
}