scroll-bleed – Make WordPress Test

Welcome

The Test Team helps manage testing and triage across the WordPress ecosystem. They focus on user testing of the editing experience and WordPress dashboard, replicating and documenting bug reports, and supporting a culture of review and triage across the project.

Weekly Meetings (Calendar)

Bi-Weekly Test Team Chat: Tuesdays 11:00 UTC
Bi-Weekly Test Team Triage: Tuesdays 11:00 UTC

You can join these meetings from the #core-test Slack channel.

Please drop by any time in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. with questions or to help out.

My journey starts in Press This on a wordpress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ site. I want to upload an image and a video. I upload both seemingly successfully, but only the image inserts. I go back into the media modal, and see this…

: Despite only one upload attempt, there are three videos. Tap them each in turn.

: I didn’t see this error during upload and insertion.

: HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. error

: HTTP error

Notice also that the progress indicator is stuck and that scroll bleedScroll 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/ is evident.

: Progress indicator stuck.

: #scroll-bleed

Maybe this is a wordpress.com specific problem. Let’s try a self-hosted site on Bluehost.

: The movie inserts as an IMG_4729 link.

: That is empty.

That’s a different error than on wordpress.com, but the effect is the same. I can’t insert a video.

Maybe this is an iOSiOS The operating system used on iPhones and iPads. problem. Next, let’s try desktop with Macos and Chrome.

Broken on desktop too.

Video insertion is broken on Macnchrome as well. The video does upload correctly. I can download it from this link and play it back.

Attachment page showing link to video.

WordPress* mobile web failure.

#chrome, #desktop, #editor, #ios, #macos, #media, #phablet, #video

Previewing and installing a theme on an iPhone 6+ starting on the add themes screen.

: Start on the add themes screen. Tap the first theme.

: The right arrow is a noop. Does this need a Preview/Install toggle similar to the Preview/Customize? Scroll around.

: This modal is exhibiting scroll bleedScroll 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/ again. See the page beneath bleeding through at the bottom. Tap Collapse.

: Tap the expand icon.

: Tap Install.

: Tap Live Preview.

: Tap Preview.

: This theme doesn’t seem responsive. Should unresponsive themes be excluded from Featured? The unresponsiveness results in horizontal scroll. Scroll.

: Notice how the Save button relocates.

: Scrolled al the way right. Click X, I don’t want an unresponsive theme.

#install, #ios, #needs-ticket, #phablet, #preview, #scroll-bleed, #theme-install, #themes

All of our modals have problems with scrolling on iOSiOS 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 surveyVisual 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 bleedScroll 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.

: PluginPlugin 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

Another case of bad scrolling behind a modal.

Previously:

https://make.wordpress.org/test/2015/02/13/scroll-bleed-through-and-scroll-position-loss-view-plugin-details-iphone-6/

https://make.wordpress.org/test/2014/10/05/scrolling-beneath-modals-nexus-5-iphone-5-4-1-alpha-20141002/

https://core.trac.wordpress.org/ticket/31381 (Needs review and commit)

https://core.trac.wordpress.org/ticket/29909 (fixed)

#ios, #login, #login-registration, #phone, #scroll-bleed, #sessions, #threshold-friction, #web

When scrolling the pluginPlugin 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 view details modal, the page beneath the modal scrolls. We’ve done some rounds of scroll bleedScroll 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/ fixes. Perhaps time for another. The modal also stomps scroll position. After dismissing the modal, you’re back at the top.

: Scroll down to Press This. Tap View details

: The details modal. Scroll down.

: Note that the page beneath scrolls. Now, dismiss the modal.

: Scroll position lost. I’ve moved back to the top. I must scroll back down to Press This.

#ios, #phablet, #plugins, #scroll-bleed, #web

The media modal, attachment details modal, and link modal all have scrolling problems on mobile/touch devices. The page beneath them scrolls, resulting in stacked scrolling and a bad experience.

Nexus 5 Media Modal: