Dinamik olarak yüklenen Bootstrap Modal, iOS 9 üzerinde ilerlemiyor

Question

Senaryo: Üzerinde çalıştığım proje, içeriğin kullanıcıya yüklenen bir yükleme göstergesiyle birlikte bir Bootstrap 3 modeline eşzamanlı olarak yüklenmesini gerektirir. Asıl yükleme bir sorun değil (aşağıda benim Codepen'ime bakın), ancak yüklenen içerik büyük olduğunda, bir konu iOS 9 cihazlarında ne kayıyor. IOS 8 de dahil olmak üzere denediğim diğer tüm cihazlarda düzgün çalışıyor. DOM'ın kaydırma yüksekliğini güncellemediğini düşünüyorum, bu nedenle modun kaydırılabilir olması gerekmiyor.

Tek çalışma, güvenilir bir şekilde çalıştığını (ancak kabul edilemez), modalın bedenini gizlemek/göstermek ve böylece yeniden hesaplamayı zorlamak olduğunu buldum. Bootstrap'in kendi handleUpdate işlevi, sorunla ilgilenmez.

Codepen'de http://codepen.io/jkrehm/full/LpRzJV/ (kod kullanılabilir here) adresinde en az bir örnek oluşturdum. Sorularıma bir QR kodu gömebilseydim, böylece telefonlarınızdan kolayca alabilirsiniz. Sadece (içerik önce yüklenir bu yüzden şeyler iyi çalışır, kalıcı gösterilen kodunu değiştirmek, ancak hiçbir yükleme göstergesi kullanıcı için varsa

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

:

en alakalı kod budur Düğmeye tıkladıktan sonra ve modal görünmeden önce belirsiz uzunlukta bir duraklama).

Özet: .modal-body Kaydırma yüksekliğini yeniden hesaplamak için iOS 9'u ikna etmek için ne yapabilirim?

Güncelleme (15 Ağustos 2017):

Görünüşe bu konuya tatmin edici bir çözüm bulunmamaktadır. Bootstrap, modellerden remove-webkit-overflow-scrolling:touch'a seçti ve Webkit ile ilgili bir bug dosyaladı. Belki bir gün düzeltilebilir, belki de değil. Şimdilik, sağlanan iş çevreleri en iyi "çözümler" dir.

Answer 1

İş arkadaşım ve bu konuyla ilgili hararetli bir çalışma yapabildik. Yukarıdan kodumu kullanarak

, böyle bir şey iOS 9 kaydırma işi yapacak:

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

Not .css('overflow-y', ...) satır. Bu sihirli sos. Yine de, gerçek CSS ile uğraşmak yerine, aynı sonucu elde etmek için .modal-scrollfix - biz & kaldırmayı eklediğimiz bir sınıf kullanıyoruz.

Önceki kalemin bir çatalını oluşturdum ve düzeltmeyi uyguladı. http://codepen.io/jkrehm/full/OybdrW/ (code)

Bu sorunla ilgili olarak Bootstrap ile bir ticket açık sahibim, ancak belge ekleme dışında neler yapabileceğinden emin değilim. Umarım Apple, sorunu iOS Safari'nin gelecekteki bir sürümünde düzeltir. iş çevresinde

Answer 2

CSS: iletişim bakılmaksızın içerik boyutu, her zaman kaydırma mümkün olduğunu bu yüzden yaparak

.modal-dialog { 
    height: 101%; 
} 

eserler.

Gönderen: https://github.com/twbs/bootstrap/issues/20256#issuecomment-231267164

ait