動的にロードされたブートストラップモーダルがiOS 9でスクロールしない

Question

シナリオ：私が取り組んでいるプロジェクトでは、ブートストラップ3モーダルに非同期的にロードされる必要があります。実際のローディングは問題ではありません（下の「Codepen」を参照してください）が、読み込まれたコンテンツが大きい場合、iOS 9デバイスをスクロールすることが問題です。これは、iOS 8を含め、私が試した他のすべてのデバイスで正しく動作します。DOMはスクロールの高さを更新しないので、モーダルがスクロール可能であるとは思われません。

私が見つけた唯一の解決策は、モーダルのボディを非表示にして再計算を強制することです（ただし、受け入れられません）。ブートストラップ自身のhandleUpdate関数は、この問題を処理しません。

私はCodepenの最小の例をhttp://codepen.io/jkrehm/full/LpRzJV/（コードはhere）に作成しました。 QRコードを私の質問に埋め込むことができれば、あなたの携帯電話で簡単に手に入ります。

最も関連性の高いコードはこれです：

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

私は、コードを変更した場合、コンテンツがロードされるよう前にモーダルが示され、ちょうど（物事が正常に動作しますが、ユーザーのためのロードインジケータがありませんボタンをクリックしてからモーダルが現れるまでの間に不定期の長さの休止）。

要約：.modal-bodyのスクロールの高さを再計算するためにiOS 9を納得させるにはどうすればよいですか？

アップデート（2017年8月15日）：

どうやら、この問題への十分な解像度がありません。ブートストラップは、モーダルからremove-webkit-overflow-scrolling:touchに選ばれ、bugをWebkitで提出しました。多分それはいつか固定されるでしょう、多分そうではないでしょう。今のところ、提供されている回避策は最良の「解決策」です。

Answer 1

私の同僚と私は、この問題のためのハッキーな回避策を見つけ出すことができました。上から私のコードを使用して

は

、このようなものは、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'); 
     }); 
}); 

注.css('overflow-y', ...)ライン。それが魔法のソースです。実際のCSSを使っているのではなく、同じ結果を得るために&を追加したクラス.modal-scrollfixを使用しています。

私は以前のペンのフォークを作成し、修正を適用しました。 http://codepen.io/jkrehm/full/OybdrW/（code）

私はこの問題について、ブートストラップ付きオープンticketがありますが、私は、彼らは追加のドキュメント以外に何ができるかわかりません。 AppleがiOS Safariの将来のバージョンでこの問題を修正してくれることを願っています。回避策

Answer 2

CSS：ダイアログは関係なく、コンテンツのサイズの、常にスクロールできるように、それを作ることで

.modal-dialog { 
    height: 101%; 
} 

作品。

から：[？携帯電話のブラウザで開いてブートストラップ3モーダルをスクロール背景を防ぐ方法] https://github.com/twbs/bootstrap/issues/20256#issuecomment-231267164