New issue
Advanced search Search tips

Issue 889482 link

Starred by 1 user

Issue metadata

Status: Untriaged
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

HTML5 video elements on the page can lead to a bad scrolling experience

Reported by msn...@cobroventures.com, Sep 26

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

Example URL:
https://mikesnare.github.io/videos.html

Steps to reproduce the problem:
1. Go to https://mikesnare.github.io/videos.html
2. Scroll up and down (might need to do that for a while, and may need to refresh the page once or twice before you see it)
3. Watch the videos closely.  They'll appear to 'flash'.

What is the expected behavior?
There should be no flashing.  The videos should just play without issue as they are scrolled around the screen.

What went wrong?
The 'flash' is actually that a frame from video A will suddenly be displayed in the position where video B is playing.  This happens for many of the videos, and it seems a bit random.  Sometimes a particular video will be affected, and sometimes it won't.  Even within one scrolling session, you'll see this.

I've attached a video of the issue that, if you move through very slowly, will help you see exactly what is happening.

Did this work before? N/A 

Is it a problem with Flash or HTML5? HTML5

Does this work in other browsers? Yes

Chrome version: 69.0.3497.100  Channel: stable
OS Version: OS X 10.13.6
Flash Version: 

Contents of chrome://gpu: (Makes the comment too long.  Will attach.)

Doesn't seem to happen in chrome on iOS.  Doesn't seem to happen in the latest chrome canary.  DOES happen in an incognito window (regular chrome) with all extensions disabled so I don't think it's related to any extension.

In the app where I'm actually trying to use videos as a replacement for GIFs, it's really, really bad -- but only for some of us.  I can't share that link because it's a pre-release app, and the webpage I did share is smaller, and doesn't suffer from the problem to the same extent.  If you add more videos, it seems to get more pronounced.


 
chromegpu.txt
67.2 KB View Download
Here's a video of the behavior.  Move through this video slowly and you'll see the video frames jump from place to place as the page is scrolled.
MP4-flashing.mov
5.5 MB View Download
UPDATE: This is actually happening in canary.  I doesn't seem to be happening on that exact page that I submitted with the bug, but that page is a boiled down version of another page I have (but can't share) on which it's much worse.  On that page, it is happening in canary.
Labels: Needs-Triage-M69
Cc: sande...@chromium.org ccameron@chromium.org
100 videos in a page probably isn't going to work that well, but it shouldn't be flashing like that. +ccameron, sandersd

In terms of implementation you should set the tags to preload=none (or metadata and provide a poster) and only play/load them as they scroll onto the screen (using an IntersectionObserver). Canary has an experiment to do this for preload=metadata videos if you run with --enable-features=PreloadMetadataLazyLoad
Thanks for the response.  In my testing, and according to this blog (https://webkit.org/blog/6784/new-video-policies-for-ios/) webkit automatically pauses the videos when they go offscreen.  However, I have that pausing code in place for my actual app for non-webkit browser -- just not in this demo.

I've recently noticed that the effect is much, much worse if the container that contains the videos (whether directly or through some hierarchy) uses flex layout and specifically flex-wrap = wrap, which we do.  I've updated the demo page (https://mikesnare.github.io/videos.html) to use this to show the bug in an even more pronounced way.
pause is a good start, but it's better to not even load them (i.e. don't set src=) until onscreen if you have tons of tags in a page.

Thanks I see some white flashes on my macbook too. It's possible the css flex box is interacting with overlays in a weird way.
w.r.t. the idea of not loading them -- Yes, and we're already doing that.  There shouldn't be more than a dozen or so videos on the screen at any one time.  Even that may sound like a lot, but not when you consider that these are being used as a replacement for GIFs in a page containing user-provided content.
Cc: sdy@chromium.org
+sdy who seems to be looking into some of the mac overlay issues these days too.
Cc: phanindra.mandapaka@chromium.org
Labels: Needs-Feedback Triaged-ET
msnare@ Thanks for the issue...

Unable to reproduce the issue on reported chrome version 69.0.3497.100 using Mac 10.13.6. Attaching screen-cast for reference.
Steps: 
---------
1. Launched reported chrome 
2. Navigated to given URL https://mikesnare.github.io/videos.html ,in the comment #0
As we are not seen any flashes on videos

@Reporter: Request you to retry this issue with fresh profile without any extensions & apps or reset all the flags and let us know if issue still persists.

Thanks..!
889482.mp4
4.1 MB View Download
It is absolutely happening in your video.  At 18 seconds in, move the video very slowly.  The "Coffee" video will be just about to leave the frame in the upper right corner of the screen.

Suddenly, the coffee video frame displays in the left of the frame, replacing the video that was previously showing the girls.  That video (with the young girls) then jumps to the right to replace the one with Meryl Streep.  Meryl Streep moves down and to left, and that pushes Jean Luc Picard over to the right.


Video-bug-before.png
217 KB View Download
Video-bug-after.png
161 KB View Download
Project Member

Comment 11 by sheriffbot@chromium.org, Oct 9

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Any update on this?  Hasn't moved in a couple of months.
Status: Untriaged (was: Unconfirmed)
Something to do with overlay setup on Mac, moving to untriaged bucket so that it can be routed through mac bugs process.

Comment 14 by dbbrooks@chromium.org, Today (13 hours ago)

Hi Dale, do you have any contact info for the folks responsible for the mac bugs process you mention in #13 so that I can send a friendly ping to them? Thanks.

Comment 15 by dalecur...@chromium.org, Today (13 hours ago)

ccameron, sdy are the right folks for routing.

Sign in to add a comment