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

Already on GitHub? Sign in to your account

Content of a page is scrolling on mobile brosers #44

Open
wwwboy opened this Issue Dec 17, 2012 · 14 comments

Comments

Projects
None yet
8 participants

wwwboy commented Dec 17, 2012

try to scroll on mobile browsers - content is scrolling! )

Owner

jschr commented Dec 17, 2012

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

wwwboy commented Dec 17, 2012

Samsung Galaxy SIII

From: Jordan Schroter [mailto:notifications@github.com]
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

Contributor

mystix commented Jan 18, 2013

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.

Owner

jschr commented Jan 18, 2013

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.

Contributor

mystix commented Jan 19, 2013

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?

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.

Owner

jschr commented Jan 21, 2013

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.

Contributor

mystix commented Jan 23, 2013

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.

Owner

jschr commented Jan 23, 2013

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 commented Apr 29, 2013

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

jsc802 commented Jun 13, 2013

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

Owner

jschr commented Jun 13, 2013

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 commented Jul 1, 2013

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

TxrWall commented Sep 18, 2015

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.

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