Dynamically loaded Bootstrap Modal does not scroll on iOS 9

[jkrehm]

Using Bootstrap 3, when I load content into a modal on the show event, scrolling on iOS 9 devices does not work. 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 handleUpdate function doesn't fix the issue, either.

I've created a minimal example on Codepen at http://codepen.io/jkrehm/full/LpRzJV/ (code available here).

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).

What can we do to convince iOS 9 to recalculate the .modal-body's scroll height? I've tried a number of things, and the only "work around" that works reliably is to hide .modal-body and show it again.

I've also created a StackOverflow question in case someone else runs into the issue and figures out a fix.

[twbs-lmvtfy]

Hi @jkrehm!

You appear to have posted a live example (http://codepen.io/jkrehm/pen/LpRzJV.html), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 9, column 1: W007: Found one or more <button>s missing a type attribute.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[jkrehm]

Added type to <button> in example (same URL). http://codepen.io/jkrehm/full/LpRzJV/

[cvrebert]

Out of curiosity, what happens if you change your code to

$modal.on('shown.bs.modal', function(e) {

(i.e. shown instead of show)?

[jkrehm]

I thought that might make a difference, too, but it did not.

I worked with my co-worker today and we figured out a solution, albeit a hacky one. The following will make iOS 9 behave properly:

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

I created a class called .modal-scrollfix with overflow-y: hidden as its rule and add and remove the class and now the modal scrolls. Yay for browser bugs.

I'm not sure how that could be incorporated into Bootstrap (documentation item?), or if it even should be incorporated.

[jkrehm]

FYI, I created a fork of my previous CodePen and applied the fix. You can check it out at http://codepen.io/jkrehm/full/OybdrW/ (code).

[moodysalem]

Potentially related: #14839

[cvrebert]

Unfortunately, I hit https://bugs.webkit.org/show_bug.cgi?id=150715 when trying to debug this, so looks like we'll have to wait for iOS 9.3 and then give debugging it another go.

[cvrebert]

Just got a chance to circle back to this and re-test (now that iOS 9.3 was released a while ago), and I can confirm the bug.
iOS Safari scrolls the underlying page instead of the modal. Toggling .modal-open .modal's overflow-y: auto off and back on again in the styles inspector (which should basically be a no-op in this case) causes it to start scrolling correctly, strongly suggesting a browser bug.

[cvrebert]

Seems to be a bug in -webkit-overflow-scrolling. Setting .modal { -webkit-overflow-scrolling: auto; } causes the bug to stop reproducing.

[cvrebert]

Filed WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=158342

[cvrebert]

Added to the Wall of Browser Bugs in #20025.

@mdo Should we remove -webkit-overflow-scrolling:touch in v4 to avoid this gnarly bug?

[Bite-Webdevelopment]

adding that code doesn't resolve it for me, it makes the whole modal render slow and not smooth on iOS 9.3.2.

[cvrebert]

I just re-tested http://output.jsbin.com/niviyet/quiet on my iPhone 5S running iOS 9.3.2, and killing -webkit-overflow-scrolling still fixes the bug.

it makes the whole modal render slow and not smooth

I wouldn't call it simply "slow". Less smooth, sure.
The trade-off is between smoother scrolling and breaking badly (by being unscrollable) when the modal's DOM gets changed by script (which is very common if your web app uses a JavaScript framework). My vote is for stability+reliability over shinyness.

[mdo]

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team

[cvrebert]

Reopening since this also has the v4 label.

[pwyssmuller]

This is still happening on iOS 10

[tanjamilanovic1993]

Adding this inside the modal div fixed it for me style="overflow-y: auto;"