Bootstrap: Dynamically loaded Bootstrap Modal does not scroll on iOS 9

Created on 24 Sep 2015 · 17Comments · Source: twbs/bootstrap

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.

browser bug confirmed css v4

Source

jkrehm

Most helpful comment

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

cvrebert on 3 Jun 2016

👍5

All 17 comments

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

twbs-lmvtfy on 24 Sep 2015

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

jkrehm on 24 Sep 2015

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

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

(i.e. shown instead of show)?

cvrebert on 25 Sep 2015

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 on 25 Sep 2015

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

jkrehm on 28 Sep 2015

Potentially related: https://github.com/twbs/bootstrap/issues/14839

moodysalem on 30 Sep 2015

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 on 19 Jan 2016

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 on 3 Jun 2016

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

cvrebert on 3 Jun 2016

👍5

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

cvrebert on 3 Jun 2016

👍2

Added to the Wall of Browser Bugs in #20025.

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

cvrebert on 3 Jun 2016

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

Bite-Webdevelopment on 3 Jun 2016

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.

cvrebert on 3 Jun 2016

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