Modal Bootstrap caricato dinamicamente non scorre su iOS 9

Question

Scenario: il progetto su cui sto lavorando richiede che il contenuto venga caricato in una modal di Bootstrap 3 in modo asincrono, con l'indicazione di caricamento visualizzata all'utente. Il caricamento effettivo non è un problema (vedi la mia Codepen sotto), ma quale è un problema è lo scorrimento su dispositivi iOS 9 quando il contenuto caricato è grande. Funziona correttamente su ogni altro dispositivo che ho provato, incluso iOS 8. Penso che il DOM non aggiorni l'altezza di scorrimento, quindi non pensa che il modale debba essere scorrevole.

L'unica soluzione che ho trovato funziona in modo affidabile (ma inaccettabile) è quello di nascondere/mostrare il corpo della modale, forzando così un ricalcolo. La funzione handleUpdate di Bootstrap non risolve il problema.

Ho creato un esempio minimo su Codepen allo http://codepen.io/jkrehm/full/LpRzJV/ (codice disponibile here). Vorrei poter inserire un codice QR nella mia domanda in modo da poterlo facilmente trovare sui tuoi telefoni.

Il codice più rilevante è questo:

// Show loader & then get content when modal is shown 
$modal.on('show.bs.modal', function(e) { 
    $(this).find('.modal-body') 
     .html('loading...') 
     .load('https://baconipsum.com/api/?type=meat-and-filler&paras=10', function() { 
      // Use Bootstrap's built-in function to fix scrolling (to no avail) 
      $modal.modal('handleUpdate'); 
     }); 
}); 

Se cambio il codice in modo che il contenuto viene caricato prima modale è mostrato, le cose funzionano bene, ma non c'è nessun indicatore di caricamento per l'utente (solo una pausa di lunghezza indeterminata dopo aver fatto clic sul pulsante e prima che appaia la modale).

Riepilogo: che cosa è possibile fare per convincere iOS 9 a ricalcolare l'altezza di scorrimento dello .modal-body?

Update (15 Agosto 2017):

Apparentemente non c'è soluzione soddisfacente a questo problema. Bootstrap ha scelto per remove-webkit-overflow-scrolling:touch dalle modali e ha depositato uno bug con Webkit a riguardo. Forse verrà riparato un giorno, forse no. Per ora, i work around forniti sono le migliori "soluzioni".

Answer 1

Il mio collega e io siamo stati in grado di capire come risolvere il problema con un hacker.

Usando il mio codice dall'alto, qualcosa di simile a questo renderà il lavoro di scorrimento su iOS 9:

// Show loader & then get content when modal is shown 
$modal.on('show.bs.modal', function(e) { 
    $(this) 
     .css('overflow-y', 'hidden') 
     .find('.modal-body') 
     .html('loading...') 
     .load('https://baconipsum.com/api/?type=meat-and-filler&paras=10', function() { 
      // Use Bootstrap's built-in function to fix scrolling (to no avail) 
      $modal 
       .css('overflow-y', '') 
       .modal('handleUpdate'); 
     }); 
}); 

Nota le .css('overflow-y', ...) linee. Questa è la salsa magica. Invece di usare il CSS effettivo, stiamo usando una classe - .modal-scrollfix - che aggiungiamo & rimuovi per ottenere gli stessi risultati.

Ho creato una forcella della penna precedente e ho applicato la correzione. http://codepen.io/jkrehm/full/OybdrW/ (code)

Ho un ticket aperto con Bootstrap su questo problema, ma non sono sicuro di quello che possono fare tranne aggiungere documentazione. Speriamo che Apple risolva il problema con una versione futura di iOS Safari.

Answer 2

CSS work-around:

.modal-dialog { 
    height: 101%; 
} 

funziona facendo in modo che il dialogo è sempre scorrimento-in grado, indipendentemente dalle dimensioni contenuti.

Da: https://github.com/twbs/bootstrap/issues/20256#issuecomment-231267164