WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

Last modified 4 years ago

#31610 closed defect (bug) (fixed)

Scroll bleed in the session expired log in modal on iOS

Reported by: ryan Owned by: ocean90
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.2
Component: Login and Registration Keywords: make-flow has-patch commit
Focuses: ui, javascript Cc:

Attachments (6)

31610.diff (585 bytes) - added by adamsilverstein 4 years ago.
IMG_0871.PNG (140.5 KB) - added by ryan 4 years ago.
Page beneath still scrolls
IMG_0872.PNG (171.1 KB) - added by ryan 4 years ago.
Stacked log in modals, both with bad scrolling
IMG_0875.PNG (241.6 KB) - added by ryan 4 years ago.
31610.patch (1.6 KB) - added by ocean90 4 years ago.
31610..2.patch (2.0 KB) - added by ocean90 4 years ago.

Download all attachments as: .zip

Change History (15)

This ticket was mentioned in Slack in #core-flow by boren. View the logs.


5 years ago

#2 @DrewAPicture
4 years ago

  • Priority changed from normal to high

#3 @adamsilverstein
4 years ago

  • Focuses javascript added
  • Keywords has-patch dev-feedback added

In 31610.diff:

  • When session expired modal opens, add the 'modal-open' class to the body, triggering overflow:hidden style on body, preventing background scrolling via swipe
  • When modal is closed, remove 'modal-open' class

Tested on Chrome debugger and background no longer scrolls.

@ryan
4 years ago

Page beneath still scrolls

@ryan
4 years ago

Stacked log in modals, both with bad scrolling

@ryan
4 years ago

#4 @ryan
4 years ago

Another scrolling issue that requires real hardware to reproduce, it seems.

Last edited 4 years ago by ryan (previous) (diff)

@ocean90
4 years ago

@ocean90
4 years ago

#5 @ocean90
4 years ago

  • Keywords dev-feedback removed

31610..2.patch should do it. Includes also a fix for screens with width <= 380px. (And a change to JS so that the modals opens directly, for testing)

Sometimes the page beneath still can be scrolled and produces the bounce effect. But this happens for all modals. AFAIK this can only be fixed if the modal fills the whole viewport.

#6 @helen
4 years ago

  • Keywords commit added

Looks good, go for it. Without the debug part, of course. :)

#7 @ocean90
4 years ago

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

In 31945:

Disable body scrolling when session expired log in modal is open.

Fixes also the missing close icon if screen width is less than 380px.

props adamsilverstein, ocean90.
fixes #31610.

#8 @DrewAPicture
4 years ago

  • Priority changed from high to normal

#9 @helen
4 years ago

In 32073:

Modals: Significantly improve the touch scrolling experience.

This particularly fixes the attachment and plugin details modals, but also improves other modals such as wpLink and interim login.

props iseulde.
fixes #31609, #31611. see #31610, #31612.

Note: See TracTickets for help on using tickets.