WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

Last modified 4 years ago

#31612 closed defect (bug) (fixed)

Scroll bleed in the link modal on iOS

Reported by: ryan Owned by: helen
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.2
Component: Editor Keywords: make-flow has-patch
Focuses: ui Cc:

Description

Attachments (5)

31612.diff (540 bytes) - added by helen 4 years ago.
Link Modal Bounce Bounce.mp4 (4.5 MB) - added by ryan 4 years ago.
Portrait and landscape scrolling of the link modal with 31612.diff
31612.patch (888 bytes) - added by iseulde 4 years ago.
31612.2.patch (852 bytes) - added by iseulde 4 years ago.
31612.2.diff (547 bytes) - added by helen 4 years ago.

Change History (29)

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


5 years ago

#2 @DrewAPicture
4 years ago

  • Priority changed from normal to high

#3 @iseulde
4 years ago

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

#4 @ryan
4 years ago

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

#5 @iseulde
4 years ago

@ryan Thanks for the video, that really helps.

This ticket was mentioned in Slack in #core by drew. View the logs.


4 years ago

#7 @adamsilverstein
4 years ago

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.

#8 @adamsilverstein
4 years ago

  • Keywords reporter-feedback added

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

#9 @ryan
4 years ago

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.

#10 @ryan
4 years ago

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.

#11 @adamsilverstein
4 years ago

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

@helen
4 years ago

#12 @helen
4 years ago

  • Keywords has-patch added; reporter-feedback removed

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.

#13 @helen
4 years ago

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

This ticket was mentioned in Slack in #core by helen. View the logs.


4 years ago

@ryan
4 years ago

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

#15 @ryan
4 years ago

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.

#16 @iseulde
4 years ago

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
4 years ago

#17 follow-up: @iseulde
4 years ago

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?

@iseulde
4 years ago

#18 in reply to: ↑ 17 @helen
4 years ago

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.

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


4 years ago

@helen
4 years ago

#20 @helen
4 years ago

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

#21 @helen
4 years ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

In 31957:

wpLink: Enable smooth scrolling on iOS devices.

fixes #31612.

#22 @ryan
4 years ago

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.

#23 @DrewAPicture
4 years ago

  • Priority changed from high to normal

#24 @helen
4 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.