Content of a page is scrolling on mobile brosers about bootstrap-modal

[jschr]

What device(s) are you seeing the issue on?

[wwwboy]

Samsung Galaxy SIII

From: Jordan Schroter [mailto:[email protected]]
Sent: Monday, December 17, 2012 5:02 PM
To: jschr/bootstrap-modal
Cc: wwwboy
Subject: Re: [bootstrap-modal] Content of a page is scrolling on mobile brosers (#44)

Hey what devices are you seeing the issue on?

—
Reply to this email directly or view it on GitHub #44 (comment) .

https://github.com/notifications/beacon/Jshd8sI44GVrKZBvymxqKHOSEyE1ojHIYSNy5PMs__AMs0KcdZuLmAK_DN-s7TAE.gif

[mystix]

Just ran into this with the latest version of bootstrap-modal on iOS 6.0.1 (iPhone 4).

The Long Modals example exhibits the bug.

[jschr]

I believe this to be more of an issue with iOS not respecting overflow:hidden. It acts as though you have a scrollable container within a scrollable container so you actually need to use 2 fingers to scroll the modal itself.

This is why libraries such as touchscroll.js and iscroll.js exist. I have a couple ideas I would like to try before adding an additional library requirement. Worst case I would also like to add a Wiki about how to use these libraries with bootstrap-modal.

[mystix]

That'd be neat =)

p.s. Encountered this on a friend's BlackBerry Bold 9900 as well.
Guess it might be a universal Webkit problem on mobile?

[littleiffel]

Have the same problem on Android 4.1 with latest version of Chrome. Cannot scroll the modal, but when trying to scroll the background is scrolled.

[jschr]

This is still kind of experimental, but you can try adding the following css rule to bootstrap-modal.css which may fix the problem:

.modal-open .page-container{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: inherit;
}

This is currently working for me on my iPhone 5 with the latest bootstrap-modal.

[mystix]

That rule fixes the issue for me somewhat on my iPhone 4 running iOS 6.0.1. Thanks!

The issue with this rule though is that a (very long) page is scrolled to the top whenever the modal is displayed, causing a loss of context after the modal is hidden. Scrolling a long modal is a little funky at the ends as well -- if you attempt to continue scrolling past a modal's footer containing a Close button, the button will be partially hidden.

[jschr]

Ah yes, now I remember why I didn't include that solution before :).

You may want to wrap the rule in a media query so it only does this for phones/tablets where the modal takes up the full screen anyways.

@media (max-width: 979px) {
    .modal-open .page-container{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: inherit;
    }
}

This is more of a hack then anything, I suppose you could also save off the scroll offset and reapply once the modal is done as well just to make it even more of a hack. Sadly, I don't think there is a css only solution to this and probably involves using a custom scolling library that I mentioned above.

[csheets]

same mobile scrolling issue on Android 4.1.2 with both stock and chrome browsers - Razr Maxx device

[jsc802]

jschr could you provide an example/demo of how one could use a custom scrolling library to fix this issue?

[jschr]

Unfortunately I never got a chance to test any of the custom scrolling libraries as I decided not to go down the route for my app. If you come across any or decide to get ambitious and try it yourself I'd gladly add it to the wiki.

[marcusg]

same problem here with android 4.1.2 (stock and chrome).

[wallaceb-dev]

Having the same problem here. Actually, the modal works perfectly on the latest release of Android(using chrome and opera), I particularly don't know about the other versions, but on iOS(didn't check the version yet), the modal scrolling doesn't work properly... I mean, if you use two fingers instead of one, somehow, the scrolling happens.