Dynamically loaded Bootstrap Modal does not scroll on iOS 9

Question

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.

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 handleUpdate function doesn't take care of the issue.

I've created a minimal example on Codepen at http://codepen.io/jkrehm/full/LpRzJV/ (code available here). I wish I could embed a QR code in my question so you could easily get to it on your phones.

The most relevant code is this:

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

If I change the code so the content is loaded before 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).

Summary: What can I do to convince iOS 9 to recalculate the .modal-body's scroll height?

Update (Aug 15, 2017):

Apparently there is no satisfactory resolution to this issue. Bootstrap has chosen to remove -webkit-overflow-scrolling:touch from the modals and filed a bug with Webkit about it. Maybe it will get fixed someday, maybe not. For now, the provided work-arounds are the best "solutions".

Answer 1

CSS work-around:

.modal-dialog {
    height: 101%;
}

Works by making it so that the dialog is always scroll-able, regardless of content size.

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

Answer 2

My co-worker and I were able to figure out a hacky work-around for this issue.

Using my code from above, something like this will make scrolling work on 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');
        });
});

Note the .css('overflow-y', ...) lines. That's the magic sauce. Instead of mucking with the actual CSS, though, we're using a class – .modal-scrollfix – that we add & remove to achieve the same results.

I've created a fork of my previous pen and applied the fix. http://codepen.io/jkrehm/full/OybdrW/ (code)

I have a ticket open with Bootstrap about this issue, but I'm not sure what they can do except add documentation. Hopefully Apple fixes the issue with a future version of iOS Safari.

Answer 3

I managed to fix this by adding the following line just after the contecnt was dynamically loaded via javascript :

$("div#myModal").css('overflow', 'auto');