Scroll bleed in the link modal on iOS

[ryan]

Swiping scrolls the page beneath.

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

[iseulde]

Cannot reproduce this with iOS 8.2. I do see the elastic scrolling effect, but the page doesn't scroll.

[ryan]

I added a screencast to that make/flow post showing the experience on an iPhone 5. Items in the list blink active as you swipe, the elastic bounce back is very distracting, and the shaded border that overlays the page beneath detaches from the bottom of the screen. List scrolling is not kinetic so you must make lots of little swipes.

List scrolling behavior is different on iPhone 5 vs. iPhone 6+. On the 5, the fields at the top of the modal scroll with the list. On the 6+, the fields at the top stay in place and only the list scrolls. The fields staying in place is nice except that limits the list to 6 entries. That's a lot of swipes in the absence of kinetic scrolling.

​https://make.wordpress.org/flow/files/2015/03/Link-Modal-Scroll-Bleed-on-an-iPhone-5.mp4?_=1

[iseulde]

@ryan Thanks for the video, that really helps.

[adamsilverstein]

Ryan,

Couldn't reproduce on Browserstack or Chrome debugger, are you testing on iOS 6 or 7? Do you see the same issue on the iphone 6? Even though I can't reproduce, I'm deducing from the other related tickets that we need to set 'overflow:hidden' on the body, will give that a try for you to test.

[adamsilverstein]

Digging a bit deeper I found that wplink.js already adds the modal-open class to body, which should prevent background scrolling. Waiting for more details to reproduce here...

[ryan]

I can reproduce with an iPhone 5 or 6+ and 4.2-beta3-31903-src. Swiping to scroll exhibits the problem from the moment the modal is visited. I suspect all of the modal problems require real devices to reproduce.

[ryan]

This is with iOS 8.2, BTW. Our modals have had scrolling problems for awhile. I want to say across all versions of 8 and most likely going back to 7 as well.

[adamsilverstein]

yea, going to have to get my actual device hooked up for testing. Thanks again for the details.

[helen]

Looks like we "just" need to add a Webkit-specific scrolling rule for the inside of the link modal - @ryan, please try 31612.diff​. The fields sticking to the top or not (fixed height for the internal linking list) is dependent on device height, so on my iPhone 6, it will change behavior between portrait and landscape.

[helen]

This doesn't fix the blue highlighting on "hover"/touch, but it's much less noticeable now that things actually scroll properly.

[ryan]

Portrait and landscape scrolling of the link modal with 31612.diff

[ryan]

Screencast shows portrait scrolling with elastic bounceback behind and bottom detachment of the shading around the modal. There's a switch to landscape where I accidentally swipe in the editor. Scrolling in the editor is a known very bad experience on iOS. I finally get the link modal open in landscape, where it is slow and glitchy. (The viewport in the video remains in portrait so the landscape view is clipped, but the gist can be seen. Should we make our modals fullscreen? Elastic bounceback behind modals feels like a terrible experience.

[iseulde]

What do you mean with fullscreen? I don't think there's any way to disable the elastic scrolling. This looks like a Safari on iOS bug. It can be disabled by cancelling the touchmove event, but that would disable scrolling everywhere.

[iseulde]

This doesn't fix the blue highlighting on "hover"/touch, but it's much less noticeable now that things actually scroll properly.

Maybe we should just remove the hover styles?
@helen, what's the overflow-x: hidden; for?

[helen]

Replying to iseulde:

Maybe we should just remove the hover styles?

I find them helpful when using a mouse because the rows are pretty small, and I wouldn't want to remove hover styling completely. Maybe they don't need to be blue, but realistically it should be enough of an effect that it's visible so it would show either way.

@helen, what's the overflow-x: hidden; for?

I was getting horizontal scrolling when the links list is a fixed height, I guess it was mostly a workaround rather than trying to chase down the width issue.

[helen]

Committing fixes to make this specific area usable - we can address any bigger picture items after 4.2 (hover state, elastic scroll, which so far appears to not be alterable, for the record).

[helen]

In 31957:

wpLink: Enable smooth scrolling on iOS devices.

fixes #31612.

[ryan]

Totally fine with whatever incremental changes we can get. If we must live with elastic scrolling beneath the modal, so be it.

The shading around the modal detaches from the bottom when elastic bounceback kicks in. Is that part and parcel with bounceback? Bounceback of the page beneath wouldn't be quite so bad if the shading around the modal stayed put.

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