1354943 - Overpainting on Youtube channel page when scrolling down

Status: RESOLVED WONTFIX

(Core :: Web Painting, defect)

Description

[(no longer active)]

STR:

1. Go to https://www.youtube.com/channel/UCKcC11ircL-HI7TieCr9XQg
2. Scroll down.

When the "AutoExpertTV Videos Playlists Channels Discussion About" snaps into its fixed vertical position, we repaint the entire scrollable area containing the video thumbnails which causes a visible scroll jank.

As far as I can tell, nothing in the DOM of that area is changing.  What happens is that as the page scrolls down, at some point, the div with id masthead-appbar gets its class set from "hid" to "" and its style set from "display: none" to "" (which causes the visible title bar snapping mentioned above) but no other change happens in the DOM, specifically, the div with id channel-subheader which includes the scrolling area of the page which includes the "Home Videos Playlists Channels Discussion About" section (the scrolling one) stays the same, so ideally we should not be repaining this large layer.

Comment 1

[(no longer active)]

Matt, any chance you could have a look, please?  Thanks!

Comment 2

[Adam Gashlin (he/him) [:agashlin] (ex-moco)]

It looks like the repaint is caused by a div called "masthead-positioner-height-offset", at the very top of the "body-container", which gets a different height when the "appbar-hidden" class is toggled on and off for the body.

Removing this node prevents those excessive repaints, though of course then the content slides under the masthead.

I don't know enough about the layout and rendering to say whether this can or should be prevented.

Comment 3

[Matt Woodrow (:mattwoodrow)]

I can reproduce this 'fix'.

Changing the height of an element near the top is going to move all the page content, so it's somewhat expected that we end up repainting everything. It's possible we could do some clever hacks to change our definition of the origin and paint things from the changed element up (instead of painting everything below it), but it's not a simple fix.

It doesn't seem like this has any noticeable effect on performance though, and even without the change the full repaint only has a raster time of 18ms (so we'd only drop a single frame).

We still completely stop scrolling when this happens, I suspect this has to do with the page change interfering with smooth scrolling, more than being a performance problem.

Comment 4

[Jet Villegas (inactive)]

I'm seeing different HTML served to Firefox vs. Chrome for this URL, so it's hard to tell if we're better or worse. Hard to measure YouTube perf relative to Chrome when the page layout is so different for the two browsers.

Comment 5

[(no longer active)]

(This bug had gotten stuck deep down in the list of bugs I hadn't gotten around to look at yet, sorry about that.)

(In reply to Adam Gashlin [:agashlin] from comment #2)
> It looks like the repaint is caused by a div called
> "masthead-positioner-height-offset", at the very top of the
> "body-container", which gets a different height when the "appbar-hidden"
> class is toggled on and off for the body.
> 
> Removing this node prevents those excessive repaints, though of course then
> the content slides under the masthead.

From this description it seems that if we report this to YouTube they could potentially fix it, but regardless I just tested this on the new YouTube and the problem doesn't exist there.  I suggest closing this as WONTFIX because of that.

Comment 6

[(no longer active)]

Hearing no objections, I'm WONTFIXing.