Context Navigation

← Previous Ticket
Next Ticket →

#31610 closed defect (bug) (fixed)

Scroll bleed in the session expired log in modal on iOS

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

Description

Swiping scrolls the page beneath the modal.

https://make.wordpress.org/flow/2015/03/05/scroll-bleed-through-in-the-session-expired-log-in-modal-iphone-5/

https://make.wordpress.org/flow/2015/03/11/modal-scrolling-on-ios/

Attachments (6)

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

Download all attachments as: .zip

Change History (15)

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

11 years ago

#2 @DrewAPicture
11 years ago

Priority normal → high

@adamsilverstein
11 years ago

Attachment 31610.diff added

#3 @adamsilverstein
11 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
11 years ago

Attachment IMG_0871.PNG added

Page beneath still scrolls

@ryan
11 years ago

Attachment IMG_0872.PNG added

Stacked log in modals, both with bad scrolling

@ryan
11 years ago

Attachment IMG_0875.PNG added

#4 @ryan
11 years ago

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

Version 0, edited 11 years ago by ryan (next)

@ocean90
11 years ago

Attachment 31610.patch added

@ocean90
11 years ago

Attachment 31610..2.patch added

#5 @ocean90
11 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
11 years ago

Keywords commit added

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

#7 @ocean90
11 years ago

Owner set to ocean90
Resolution → fixed
Status new → 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
11 years ago

Priority high → normal

#9 @helen
11 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.

Download in other formats:

Make WordPress Core

Context Navigation

#31610 closed defect (bug) (fixed)

Scroll bleed in the session expired log in modal on iOS

Description

Attachments (6)

Change History (15)

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

#2 @DrewAPicture 11 years ago

@adamsilverstein 11 years ago

#3 @adamsilverstein 11 years ago

@ryan 11 years ago

@ryan 11 years ago

@ryan 11 years ago

#4 @ryan 11 years ago

@ocean90 11 years ago

@ocean90 11 years ago

#5 @ocean90 11 years ago

#6 @helen 11 years ago

#7 @ocean90 11 years ago

#8 @DrewAPicture 11 years ago

#9 @helen 11 years ago

Download in other formats:

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

11 years ago

#2 @DrewAPicture
11 years ago

@adamsilverstein
11 years ago

#3 @adamsilverstein
11 years ago

@ryan
11 years ago

@ryan
11 years ago

@ryan
11 years ago

#4 @ryan
11 years ago

@ocean90
11 years ago

@ocean90
11 years ago

#5 @ocean90
11 years ago

#6 @helen
11 years ago

#7 @ocean90
11 years ago

#8 @DrewAPicture
11 years ago

#9 @helen
11 years ago