Scroll bleed through and scroll position loss in the view plugin details modal on iOS

[ryan]

When scrolling the plugin view details modal on an iOS device, the page beneath the modal scrolls. The modal also stomps scroll position. After dismissing the modal, you’re back at the top of the underlying page rather than where you were when you invoked the modal.

​https://make.wordpress.org/flow/2015/02/13/scroll-bleed-through-and-scroll-position-loss-view-plugin-details-iphone-6/

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

[adamsilverstein]

Ryan,

I couldn't reproduce the background scrolling, however I did see the 'jumping to the top' issue that was the main point of the ticket. In 31609.diff​ I made a small css change (removing height 100%) that resolves the issue in my chrome debugger testing.

This line was introduced in r30707 trying to resolve this exact issue for scrolling behind modals.

Related: #29909 - perhaps @iseulde has better insight into why height: 100% was added here.

[iseulde]

@adamsilverstein Removing the height doesn't change anything for me.

[adamsilverstein]

Replying to iseulde:

@adamsilverstein Removing the height doesn't change anything for me.

In my testing it fixes the 'jumping to the top' issue Ryan describes above: if you scroll down on the list, open a detail modal, then close, you wind up back at the top of the page; removing the height 100% fixes that; I'm guessing the bleed thru scrolling is still not resolved, need to test that on an actual device as it doesn't seem to happen with the emulators.

[jorbin]

In https://core.trac.wordpress.org/ticket/31608#comment:24 I actually experimented with making the modal full screen for small screens (in this case it is for low height, but we could also make it for low width as well. What do people think of that method?

[ryan]

Replying to adamsilverstein:

Replying to iseulde:

@adamsilverstein Removing the height doesn't change anything for me.

In my testing it fixes the 'jumping to the top' issue Ryan describes above: if you scroll down on the list, open a detail modal, then close, you wind up back at the top of the page; removing the height 100% fixes that; I'm guessing the bleed thru scrolling is still not resolved, need to test that on an actual device as it doesn't seem to happen with the emulators.

Jump to top fixed on my iPhone 6+. @adamsilverstein discussed scrolling on the other modal tickets, and real hardware does seem to be required to reproduce.

[iseulde]

There's a patch on #31611 which should address both issues.

[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.