1277327 - Video on gaming.youtube.com lags behind while scrolling

Status: RESOLVED INCOMPLETE

(Core :: Graphics: Layers, defect, P3)

Description

[Botond Ballo [:botond]]

STR:
  1. Disable APZ (set layers.async-pan-zoom.enabled to false) and restart.
     This is important, because APZ causes additional misbehaviour on
     this page, but I intend this bug to track specifically the
     non-APZ misbehaviour.
  2. Load https://gaming.youtube.com/watch?v=gCISR0T3grE
  3. Scroll the page, watching the bottom of the video closely.

Expected results:
  When the page scrolls, the video scrolls with it immediately.
  This is the behaviour with Chrome.

Actual results:
  When the page scrolls, the video lags behind for a fraction
  of a second, before it also moves.

The video is position:fixed, with its "top" property being adjusted during a requestAnimationFrame callback.

I believe that means it's "fair game" for it to lag behind the page during scrolling, but I haven't investigated too deeply, and in any case Chrome manages not to suffer from this, so we should at least understand why.

Comment 1

[Botond Ballo [:botond]]

IE11 also has this laggy scrolling on that page, although I believe IE11 has the equivalent of APZ, and I don't know how to disable it, so I can't tell whether it suffers specifically from the problem in this bug.

Comment 2

[Andrew Overholt [:overholt]]

I'm confused because disabling APZ should make scrolling less smooth, right? Is the full black page expected with APZ enabled? Do we care about non-APZ cases?

(Should this be something other than DOM: Events?)

Comment 3

[Olli Pettay [:smaug][[e-mail]]]

Guessing Graphics: Layers.

Comment 4

[Botond Ballo [:botond]]

(In reply to Andrew Overholt [:overholt] from comment #2)
> I'm confused because disabling APZ should make scrolling less smooth, right?

The issue on this page is that two parts of the page (the video, and the rest of the page), don't move at the same time during scrolling, because they are moved by different mechanisms: the video is position:fixed and has its "top" property adjusted in requestAnimationFrame, while the rest of the page scrolls normally.

APZ makes this worse, and we have a bug to track that (bug 1243385), but there is an issue even in the absence of APZ, and that's why I filed this bug.

> Is the full black page expected with APZ enabled? 

Not sure what you mean by "full black page".

> Do we care about non-APZ cases?

That there is a jitter even with APZ disabled, suggests that there is an issue related to how we handle requestAnimationFrame. That issue will be present regardless of what we do with APZ. So yes, we do care.

> (Should this be something other than DOM: Events?)

Since the issue is related to requestAnimationFrame, the bug should be in whatever component is concerned with that. Core::DOM perhaps?

Comment 5

[Andrew Overholt [:overholt]]

(In reply to Botond Ballo [:botond] from comment #4)
> (In reply to Andrew Overholt [:overholt] from comment #2)
> > Is the full black page expected with APZ enabled? 
> 
> Not sure what you mean by "full black page".

I just get a full black page in Nightly on Windows 10.

> > (Should this be something other than DOM: Events?)
> 
> Since the issue is related to requestAnimationFrame, the bug should be in
> whatever component is concerned with that. Core::DOM perhaps?

Seems like we have rAF bugs in DOM and Graphics and Graphics:Layers so let's leave this where smaug put it for now.

Thanks.

Comment 6

[Botond Ballo [:botond]]

Bug 1433019 changed the ordering between scroll events and requestAnimationFrame and may have fixed this. See also bug 1526229, the latest bug filed about this site.

Comment 8

[Gregory Pappas [:gregp]]

gaming.youtube.com shut down in 2019. Is it safe to close this bug?

Comment 9

[Botond Ballo [:botond]]

Yes, let's close.