WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

#31609 closed defect (bug) (fixed)

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

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

Description

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/

Attachments (1)

31609.diff (305 bytes) - added by adamsilverstein 4 years ago.

Download all attachments as: .zip

Change History (13)

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

  • Keywords has-patch dev-feedback added

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.

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


4 years ago

#5 follow-up: @iseulde
4 years ago

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

#6 in reply to: ↑ 5 ; follow-up: @adamsilverstein
4 years ago

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.

#7 @jorbin
4 years ago

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?

#8 in reply to: ↑ 6 @ryan
4 years ago

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.

#9 @iseulde
4 years ago

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

#10 @DrewAPicture
4 years ago

  • Owner set to helen
  • Status changed from new to assigned

#11 @DrewAPicture
4 years ago

  • Keywords commit added; dev-feedback removed

#12 @helen
4 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.