title: Dynamically loaded Bootstrap Modal does not scroll on iOS 9
body: <p>Scenario: The project I'm working on requires that content get loaded into a Bootstrap 3 modal asynchronously, with loading indication displayed to the user. The actual loading is not an issue (see my Codepen below), but what is an issue is scrolling on iOS 9 devices when the loaded content is large. It works correctly on every other device that I've tried, including iOS 8. I think the DOM doesn't update the 's scroll height, so it doesn't think the modal should be scrollable.</p>
  
  <p>The only work-around I've found that reliably works (but is unacceptable) is to hide/show the modal's body, thus forcing a recalculation. Bootstrap's own <code>handleUpdate</code> function doesn't take care of the issue.</p>
  
  <p>I've created a minimal example on Codepen at <a href="http://codepen.io/jkrehm/full/LpRzJV/" rel="nofollow noreferrer">http://codepen.io/jkrehm/full/LpRzJV/</a> (code available <a href="http://codepen.io/jkrehm/pen/LpRzJV" rel="nofollow noreferrer">here</a>). I wish I could embed a QR code in my question so you could easily get to it on your phones.</p>
  
  <p>The most relevant code is this:</p>
  
  <pre><code>// Show loader &amp; 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&amp;paras=10', function() {
              // Use Bootstrap's built-in function to fix scrolling (to no avail)
              $modal.modal('handleUpdate');
          });
  });
  </code></pre>
  
  <p>If I change the code so the content is loaded <em>before</em> the modal is shown, things work fine, but there's no loading indicator for the user (just a pause of indeterminate length after they click the button and before the modal appears).</p>
  
  <p>Summary: What can I do to convince iOS 9 to recalculate the <code>.modal-body</code>'s scroll height?</p>
  
  <p>Update (Aug 15, 2017):</p>
  
  <p>Apparently there is no satisfactory resolution to this issue. Bootstrap has chosen to <a href="https://github.com/twbs/bootstrap/pull/20803" rel="nofollow noreferrer">remove</a> <code>-webkit-overflow-scrolling:touch</code> from the modals and filed a <a href="https://bugs.webkit.org/show_bug.cgi?id=158342" rel="nofollow noreferrer">bug</a> with Webkit about it. Maybe it will get fixed someday, maybe not. For now, the provided work-arounds are the best "solutions".</p>