Scroll bleed in the attachment details modal on iOS

[ryan]

Swiping scrolls the page beneath.

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

[adamsilverstein]

Ryan,

I was unable to reproduce this issue in chrome debugger or on Browserstack, testing with emulated iPhone 5, 6 and 6+.

About to test on an actual device, curious if you have any tips or conditions required to reproduce, I assume you are testing on an actual device and this may be the difference.

[ryan]

Replying to adamsilverstein:

Ryan,

I was unable to reproduce this issue in chrome debugger or on Browserstack, testing with emulated iPhone 5, 6 and 6+.

About to test on an actual device, curious if you have any tips or conditions required to reproduce, I assume you are testing on an actual device and this may be the difference.

On my iPhone 6+ and iPhone 5 with 4.2-beta3-31903-src, all I have to do is scroll to the bottom to trigger. Once at the bottom, thumbnails will start to bleed through. Sometimes the bleed is more apparent if, after reaching the bottom, you start swiping back up without lifting your finger. The underlying page grabs the swipe. Swipe up and down without removing your finger to get glimpses along the bottom of the screen of the media lib grid view scrolling with your finger. Once your finger is lifted, the thumbnail bleed through disappears. Scrolling is very choppy because there's a fight between the modal and the page beneath over who goes on finger ride along.

[adamsilverstein]

Ok, I'll get my setup working for local dev with my actual iPhone6, I didn’t really see this effect in Browserstack or chrome debugger.

Thanks for the details on how to reproduce.

Replying to ryan:

Replying to adamsilverstein:

Ryan,

I was unable to reproduce this issue in chrome debugger or on Browserstack, testing with emulated iPhone 5, 6 and 6+.

About to test on an actual device, curious if you have any tips or conditions required to reproduce, I assume you are testing on an actual device and this may be the difference.

On my iPhone 6+ and iPhone 5 with 4.2-beta3-31903-src, all I have to do is scroll to the bottom to trigger. Once at the bottom, thumbnails will start to bleed through. Sometimes the bleed is more apparent if, after reaching the bottom, you start swiping back up without lifting your finger. The underlying page grabs the swipe. Swipe up and down without removing your finger to get glimpses along the bottom of the screen of the media lib grid view scrolling with your finger. Once your finger is lifted, the thumbnail bleed through disappears. Scrolling is very choppy because there's a fight between the modal and the page beneath over who goes on finger ride along.

[ryan]

Looking much better on an iPhone 6+ after a few minutes comparing the behavior of the attachment details modal, link modal, and plugin details with and without the patch.

[iseulde]

Maybe we should add momentum scrolling here too? Updated patch.

[ryan]

Tested the link modal, media modal, attachment modal, plugin modal, and theme modal on iPhone 6+, iPhone 5, and Nexus 5. Looking good. Kinetic scrolling of the link modal's list is nice. If I try to swipe the link modal itself (as opposed to the link list), the modal and its surrounding shading detaches from the bottom a bit before bouncing back. After doing this a few times, scrolling in the link list becomes non-responsive. Reproducing this requires repeated swipes at the modal outside of the link list. Not a big deal and not a regression. I still need to test the session expired modal, but don't expect any problems.

This removes a lot of frustration.

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