New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamically loaded Bootstrap Modal does not scroll on iOS 9 #17695

Closed
jkrehm opened this Issue Sep 24, 2015 · 17 comments

Comments

Projects
None yet
8 participants
@jkrehm
Copy link

jkrehm commented Sep 24, 2015

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

This comment has been minimized.

Copy link

twbs-lmvtfy commented Sep 24, 2015

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

This comment has been minimized.

Copy link

jkrehm commented Sep 24, 2015

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

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Sep 24, 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)?

@jkrehm

This comment has been minimized.

Copy link

jkrehm commented Sep 25, 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

This comment has been minimized.

Copy link

jkrehm commented Sep 28, 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).

@moodysalem

This comment has been minimized.

Copy link

moodysalem commented Sep 30, 2015

Potentially related: #14839

@cvrebert cvrebert assigned cvrebert and unassigned cvrebert Jan 19, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jan 19, 2016

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

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 3, 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 cvrebert added the confirmed label Jun 3, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 3, 2016

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

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 3, 2016

cvrebert added a commit that referenced this issue Jun 3, 2016

cvrebert added a commit that referenced this issue Jun 3, 2016

Port #20025 to v3
Add Wall of Browser Bugs entry for #17695 (#20025)

See https://webkit.org/b/158342
Refs #17695.

[skip sauce]

@cvrebert cvrebert added v4 css and removed js labels Jun 3, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 3, 2016

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

This comment has been minimized.

Copy link

Bite-Webdevelopment commented Jun 3, 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.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 3, 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.

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Sep 5, 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

@mdo mdo closed this Sep 5, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Sep 5, 2016

Reopening since this also has the v4 label.

@cvrebert cvrebert reopened this Sep 5, 2016

@cvrebert cvrebert removed the v3 label Sep 5, 2016

@pwyssmuller

This comment has been minimized.

Copy link

pwyssmuller commented Sep 28, 2016

This is still happening on iOS 10

@tanjamilanovic1993

This comment has been minimized.

Copy link

tanjamilanovic1993 commented Oct 3, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment