Modal overflow does not scroll on iOS

[ColtonProvias]

When viewing a modal on iPad, attempts to scroll within the content of the modal instead triggers scrolling of the entire page in the background.

Tested on iPad 2 iOS 5.1 Mobile Safari while viewing Bootstrap Documentation and Examples http://twitter.github.com/bootstrap/javascript.html#modals

[arronmabrey]

Yes also having this issue.

[arronmabrey]

Also related if you trigger the modal when you are at the bottom of the page the modal will show up at the top of the page and the user has no indication that anything has happend except everything is blacked out.

Update: I filled a separate issue here #3391

[ColtonProvias]

arronmabrey: I would recommend submitting that as a separate issue so that can be looked at separately.

Upon further inspection, it is possible to scroll the content of a modal overlayed. However, you have to use a two finger scroll, which is highly unintuitive to mobile users. I can understand this being a deterrent for using modals on iPhone/iPod touch/Android phones, but iPads should still be able to handle modals. If there is a way to override this functionality efficiently, maybe look into implementing that. Otherwise it is a design feature implemented by Apple in a quite poor fashion and we may just have to avoid larger modals with overflows on iOS devices.

[arronmabrey]

Thanks I will submit a new issue. (Update: #3391)

In the mean time this is what I have done to resolve the modal-body scrolling issue.

I overrode the .modal-body{ max-height:none; } by setting max-height to none there is no scrolling.

Now I'm using the responsive version of bootstrap and I'm using http://modernizr.com/ so I'm only targeting small touch devices with this.

@media only screen and (max-width: 480px) {
  .touch .modal .modal-body {
    max-height: none; 
  }
}

I would suggest this as the default for the Smartphones media query as it feels the most natural vs that 2 finger drag business, which incidentally did not work when I had an embedded (iframe) http://wufoo.com/ form as the body.

[init-0]

After much search and the wast of a couple days, I found that android does not support (anything older than honeycomb) scrolling on anything other than the body of an html page. Here is the reference I found: http://code.google.com/p/android/issues/detail?id=6864&q=scroll%20android%20inner&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars

[sperte]

Yeah, seeing this issue, too. And performance with the suggested fix of .modal-body { max-height: none} is pretty bad. (E.g. no scrollbar indicator, no momentum, etc.)

Edit: Just discovered -webkit-overflow-scrolling: touch;, which greatly helps the performance on iOS.

[dafinley]

I've been making the recommendation to my team just create a new page. I dont really think modals on mobile are worth right now. If you create a new tab/window. The user will not lose their place. It wont be as seamless as a working modal solution would be....but it will be compared to what modals currently are capable of on mobile.

[jokabuyasina]

please guys i need help
i have a form inside a modal, the issue is when i submit the form its closing the modal and i dont want that to happen, i tried so many things but nothing till now somebody help ?

[dafinley]

I would just drop the modal on mobile and create an entirely new page. In
general modal on mobile is not ready and its not that common of a UI
feature on native apps. Most apps bring up a new page...that's a web thing
we're trying to bring to a touch environment.

On Fri, Nov 2, 2012 at 11:59 PM, jonathan notifications@github.com wrote:

please guys i need help
i have a form inside a modal, the issue is when i submit the form its
closing the modal and i dont want that to happen, i tried so many things
but nothing till now somebody help ?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/3361#issuecomment-10036053.

Douglas Finley
Starline Ventures
www.starlineventures.com http://www.bigbrer.com/
www.twitter.com/starlineventure
CEO, Technology
504-298-9354

[atherdon]

Thanks!

[mdo]

Punting as a won't fix until v3 when we redo the modals.

[nym]

I feel like I'm chasing the dragon... NEED A FIX!

[jschr]

@nym check out my modal extension: https://github.com/jschr/bootstrap-modal

Issue #44 discusses how you might solve to problem, albeit some caveats.

Hopefully this helps until BS 3 comes out.

[charmz]

I had good luck with using:

-webkit-overflow-scrolling: touch;

and the no-body-scroll-fix (both listed above)