Scrolling beneath modals bad experience on mobile

[obenland]

The media modal, attachment details modal, and link modal all have scrolling problems on mobile/touch devices. The page beneath them scrolls, resulting in stacked scrolling and a bad experience.

First reported in: ​https://make.wordpress.org/flow/2014/10/05/scrolling-beneath-modals-nexus-5-iphone-5-4-1-alpha-20141002/

[iseulde]

We already block scrolling under the media modal with overflow: hidden;, but unfortunately that doesn't work in iOS (and other mobile browsers?). Solutions I found so far are ugly.

[afercia]

Sorry I can't test on mobile browsers but what about to use position: fixed for just mobiles?
​http://stackoverflow.com/questions/14270084/overflow-xhidden-doesnt-prevent-content-from-overflowing-in-mobile-browsers

body.mobile.modal-open {
	position: fixed !important;
}

needs to override the inline position: relative though.

Also, this "modal-open" class should be used for all modals, not just the media ones.

[iseulde]

Found something. :) In wp-admin, we can set overflow: hidden; on #wpwrap for mobile. Tested in iOS 8 and it works well. It's less ideal than setting it on the body, but it does the job.

So the problem is that, at least in iOS, overflow: hidden; does not work on the html and body tags. Unfortunately, position: fixed; doesn't work for anything when the keyboard is open.

Please test. :)

We should add the modal-open class for all other modals.
Also note that the modal-open class only has rules for the admin, not the front-end. It might be better to move these rules to the admin bar style sheet.

[afercia]

Replying to avryl:

We should add the modal-open class for all other modals.

See #29074 it was closed but I'd suggest to reopen that ticket to manage all the modals there.

[johnbillion]

This fixes the issue in latest Chrome and Safari on iOS 7.1, and in latest Chrome on Android 4.4. Happy for this to go in.

[johnbillion]

In 30707:

Prevent scrolling beneath modals on mobile devices by removing overflow from #wpwrap when a modal is open.

Fixes #29909
Props avryl