1650294 - [Youtube] Missing scrollbar on expanded playlist in miniplayer mode

Status: RESOLVED DUPLICATE of bug 1316534

(Core :: Layout: Flexbox, defect, P2)

Description

[Anca Soncutean [:Anca], Desktop Release QA]

Attachment: missing scrolbar.png

Affected versions

• 80.0a1 (2020-07-02)
• 79.0b3
• 78.0

Affected platforms

• Windows 10
• Ubuntu 18.04
• macOS 10.15

Steps to reproduce

1. Log in into www.youtube.com/
2. Open any playlist
3. Click on the Miniplayer button
4. Click on the arrow that expands the playlist video list

Actual result

• No scrollbar available, part of the content is not accessible

Expected result

• The dropdown can be scrolled

Regression range

• I will provide additional information asap

Additional notes

• Recommended severity: S3

Comment 1

[Alice0775 White]

Attachment: reduced html

Comment 2

[Anca Soncutean [:Anca], Desktop Release QA]

Not a regression, issue reproducible way back to Fx 43.0a1.

Comment 3

[Sean Voisen (:svoisen)]

Daniel: Thoughts?

Comment 4

[Daniel Holbert [:dholbert]]

This is a version of bug 1316534.

There's an overflow:auto element, whose height is intended to be constrained; but it's in a nested tree of flex containers and it ends up "propping up" the height of one of its ancestors to be as tall as the scrolled area (and so it just runs offscreen instead of being scrollable).

The intended-to-be-scrollable element is <div id="items">, and its grandparent-element <ytd-playlist-panel-renderer id="playlist" class="style-scope ytd-miniplayer"> has height:0; flex:1;flex-basis: 1e-9px;. Our problem is that we're resolving that grandparent element's default min-height:auto value to something quite large (the intrinsic height of its content, including all the scrolled area). Per spec, the height:0 should stop us from doing that -- that should set an upper-bound for the resolved value of min-height:auto there, but we implement an older version of the spec where we only constrain the min-height:auto if flex-basis is at its default value (and it's not at its default value here, so we don't bother constraining the resolved min-height:auto).

Workarounds that we could hypothetically suggest (or at least use for investigation/observation), up until bug 1316534 is fixed:
(a) Adding min-height: 0 to the #playlist.ytd-miniplayer CSS rule (this shouldn't change the behavior in other browsers at all, because height:0 is already supposed to nerf the min-height value, aside from the fact that we've got bug 1316534)
(b) setting flex-basis:auto instead of to 1e-9px (There's a small chance this might change the behavior very slightly in other browsers, so (a) is preferable to this as a hypothetical workaround)

Comment 5

[Daniel Holbert [:dholbert]]

BTW I'm using https://www.youtube.com/watch?v=EayuuISrIw0&list=PLOTmY-rTH6lBQ0AOF1hbGnX1EGL4vRGPb as my testing playlist.

Comment 6

[Ting-Yu Lin [:TYLin] (UTC-7)]

On Firefox 83.0a1 (2020-09-23), both the reduced testcase in comment 1 and the playlist in comment 5 opened in miniplayer (nice music, btw!) are scrollable (with scrollbar shown), fixed by bug 1316534.