WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#29909 closed defect (bug) (fixed)

Scrolling beneath modals bad experience on mobile

Reported by: obenland Owned by: johnbillion
Milestone: 4.1 Priority: normal
Severity: normal Version:
Component: General Keywords: has-patch make-flow
Focuses: ui Cc:

Description

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/

Attachments (1)

29909.patch (882 bytes) - added by iseulde 6 years ago.

Download all attachments as: .zip

Change History (9)

#1 @iseulde
6 years ago

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.

#2 @afercia
6 years ago

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
6 years ago

#3 follow-up: @iseulde
6 years ago

  • Component changed from Editor to General
  • Keywords has-patch needs-testing added
  • Milestone changed from Awaiting Review to 4.1

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.

#4 @DrewAPicture
6 years ago

  • Focuses ui added

#5 in reply to: ↑ 3 @afercia
6 years ago

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.

#6 @obenland
6 years ago

  • Keywords make-flow added; flow removed

#7 @johnbillion
6 years ago

  • Keywords needs-testing removed

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.

#8 @johnbillion
6 years ago

  • Owner set to johnbillion
  • Resolution set to fixed
  • Status changed from new to closed

In 30707:

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

Fixes #29909
Props avryl

Note: See TracTickets for help on using tickets.