Scroll bleed in the session expired log in modal on iOS

[ryan]

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/

[adamsilverstein]

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]

Page beneath still scrolls

[ryan]

Stacked log in modals, both with bad scrolling

[ryan]

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

[ocean90]

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.

[helen]

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

[ocean90]

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.

[helen]

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.