Dynamisch geladenes Bootstrap-Modal scrollt nicht auf iOS 9

Question

Szenario: Das Projekt, an dem ich arbeite, erfordert, dass Inhalte asynchron in ein Bootstrap 3-Modal geladen werden, wobei dem Benutzer die Ladeanzeige angezeigt wird. Das tatsächliche Laden ist kein Problem (siehe mein Codepen unten), aber ein Problem ist Scrollen auf iOS 9-Geräten, wenn der geladene Inhalt groß ist. Es funktioniert auf jedem anderen Gerät, das ich ausprobiert habe, einschließlich iOS 8. Ich denke, das DOM aktualisiert die Scroll-Höhe nicht, so dass das Modal nicht scrollbar sein sollte.

Der einzige Workaround, den ich gefunden habe, der zuverlässig funktioniert (aber inakzeptabel ist) ist, den Körper des Modals zu verstecken/anzuzeigen, was eine Neuberechnung erzwingt. Bootstrap's eigene handleUpdate Funktion kümmert sich nicht um das Problem.

Ich habe ein minimales Beispiel für Codepen unter http://codepen.io/jkrehm/full/LpRzJV/ (Code verfügbar here) erstellt. Ich wünschte, ich könnte einen QR-Code in meine Frage einbetten, damit Sie leicht auf Ihren Telefonen dazu kommen können.

Der relevanteste Code ist dies:

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

Wenn ich den Code ändern, damit der Inhalt vor geladen wird die modale gezeigt wird, die Dinge gut funktionieren, aber es gibt keine Ladeanzeige für den Benutzer (nur eine Pause von unbestimmter Länge, nachdem sie auf den Knopf geklickt haben und bevor das Modal erscheint.

Zusammenfassung: Was kann ich tun, um iOS 9 zu überzeugen, die Bildlaufhöhe .modal-body neu zu berechnen?

Update (15. August 2017):

Anscheinend gibt es keine zufriedenstellende Lösung für dieses Problem. Bootstrap hat remove-webkit-overflow-scrolling:touch aus den Modals gewählt und einen bug mit Webkit darüber abgelegt. Vielleicht wird es eines Tages repariert werden, vielleicht nicht. Vorerst sind die bereitgestellten Work-Arounds die besten "Lösungen".

Answer 1

Mein Kollege und ich konnten eine hacky Workaround für dieses Problem herausfinden.

mein Code von oben, so etwas wie dies auf iOS 9 machen Scrollen Arbeit:

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

Beachten Sie die .css('overflow-y', ...) Linien. Das ist die magische Soße. Anstatt mit dem eigentlichen CSS zu muckeln, verwenden wir eine Klasse - .modal-scrollfix -, die wir hinzufügen & entfernen, um die gleichen Ergebnisse zu erzielen.

Ich habe eine Gabel von meinem vorherigen Stift erstellt und das Update angewendet. http://codepen.io/jkrehm/full/OybdrW/ (code)

Ich habe eine ticket offen mit Bootstrap zu diesem Thema, aber ich bin mir nicht sicher, was sie außer Dokumentation hinzufügen tun können. Hoffentlich behebt Apple das Problem mit einer zukünftigen Version von iOS Safari.

Answer 2

CSS Behelfslösung:

.modal-dialog { 
    height: 101%; 
} 

Werke von ihm, so dass der Dialog immer Scroll-fähig, unabhängig von Inhalt Größe zu machen.

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