All of our modals have problems with scrolling on iOS The operating system used on iPhones and iPads.. The page behind the modal scrolls when you swipe. Bleed through of the page beneath and sometimes stacked scrolling make for a frustrating experience. A few months ago, we made a big improvement to modal scrolling with the fix for #29909.
Ticket 29909: Scrolling beneath modals bad experience on mobile
Changeset 30707: Prevent scrolling beneath modals on mobile devices by removing overflow from #wpwrap when a modal is open.
That was the end of the scroll issues on Android. iOS has not been so straightforward. Recently, scrolling issues with the theme details modal were fixed by setting –webkit–overflow–scrolling to touch.
Ticket 31381: The theme details modal has scrolling and toolbar problems on iPhone 6 and 6+
The attachment details modal, link modal, session expired log in modal, and plugin details modal still have scrolling issues on iOS. Here’s a visual survey A visual survey is a collection of screenshots for a like set of screens or interfaces, such as all list table screens or all toolbar incarnations across various devices. These screens are not presented in the context of a particular flow.https://make.wordpress.org/test/tag/visual-survey/ of these modals on an iPhone 6+.
-
-
Attachment details modal as accessed from the media library grid view. The images glimpsed at the bottom should not be there. That is scroll bleed Sometimes when scrolling a modal such as the media modal on touch devices, the scrolling bleeds through to the page beneath the modal. Instead of scrolling the modal, the page beneath scrolls. Sometimes the scrolling nests and sometimes the page beneath grabs scrolling all for itself. Android doesn't usually have this problem, but iOS triggers it often.https://make.wordpress.org/test/tag/scroll-bleed/ of the media lib beneath. I can reliably trigger this every time by scrolling down to the bottom of the modal and then scrolling back up. Each scroll up swipe invokes bleed through.
-
-
Link modal as accessed from the editor. Swiping anywhere on the screen causes the page beneath the modal to scroll.
-
-
Session expired log in modal as seen when your session expires. Swiping scrolls the page beneath.
-
-
Plugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party details modal as accessed from plugins.php. Each swipe scrolls both the modal and the page beneath. Thus, each swipe results in elastic bounce back of the underlying page. Bounce, bounce, bounce goes the admin bar.
Screencast of the Link Modal on an iPhone 5 running iOS 8.2. The effect is even more disconcerting on the larger screen of an iPhone 6+ because more of the page behind the modal is exposed.
#ios, #modal, #scroll-bleed, #web
You must be logged in to post a comment.