All of our modals have problems with scrolling on iOS. 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
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 of these modals on an iPhone 6+.
#gallery-143 {
margin: auto;
}
#gallery-143 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-143 img {
border: 2px solid #cfcfcf;
}
#gallery-143 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
-
- 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 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 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.