Bootstrap 3 modale scompare su iPad Safari solo dopo aver scelto l'opzione dal menu di selezione

Question

Ho una funzione di registrazione in un'applicazione web che prende un utente attraverso un processo in quattro fasi per aggiungere informazioni al sito. Quando un utente fa clic sul pulsante "Aggiungi", viene visualizzata una modale Bootstrap e l'utente inizia dal punto 1.

Ogni passo ha un menu di opzioni per un utente di scegliere e il dato che è popolata in ogni passaggio dipende scelte i passi precedenti. Un utente può lasciare un passaggio in bianco e continuare, ma non ha altra scelta da fare per il resto del processo. Questa funzionalità si comporta come previsto in ogni browser desktop e mobile ad eccezione di Safari su iPad.

In Safari, l'utente aprirà il modale, scegli i dati nel passaggio 1 e passerà al punto 2. Se l'utente non sceglie nulla in questo menu a discesa, può continuare con il passaggio 3. Tuttavia, se eseguono un scelta nel passaggio 2, la modale scompare e l'utente non può continuare. Questo accade solo in Safari per iPad/iPhone.

Ho provato ad installare l'ispettore web su iPad e il caricamento della console su un Mac, ma non ci sono errori o altri messaggi di utilizzo nella console. Sto cercando di capire se si tratta di un bug in Safari o se Safari gestisce gli input modali da un tag select in modo diverso rispetto ad altri browser.

Answer 1

Aveva un amico sviluppatore dare un'occhiata. Ha aggiunto questa funzione:

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>'); 

}

E poi il richiamo modale:

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

Questo sembra aver risolto il problema. Spero che questo aiuti gli altri!

Answer 2

Questo sembra essere causato dalla transizione fade. Per prima cosa ho rilevato se l'app funziona su iOS, quindi ho effettuato una query per gli elementi .modal e ho rimosso la classe fade. Questo ha risolto il problema sia su iPad/iPhone. Nota: lo sfondo modale potrebbe richiedere qualche sforzo in più per rendere piacevole il gioco con la tastiera virtuale che si apre e chiude.

Facciamo un esempio:

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

Edit: iPad (orizzontale) anche richiesto

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

Answer 3

Ho avuto un problema simile con un droplist all'interno di un contenitore che è stato scomparendo al momento della selezione e questo è stato SOLO accade su un dispositivo IPAD reale (check in chrome w/la barra degli strumenti del dispositivo con 'IPAD' selezionata funzionava bene). Questo sembra essere un bug noto come menzionato nel commento sopra.

Modifica del css per il contenitore nella posizione : assoluto risolto il problema per me. Tuttavia, interromperebbe il layout per gli altri dispositivi & viewport.

La correzione era di indirizzare solo IPADs con la regola CSS modificato:

@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; 
    } 
}