Closed Bug 1650294 Opened 4 years ago Closed 4 years ago

[Youtube] Missing scrollbar on expanded playlist in miniplayer mode

Categories

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

defect

Tracking

()

RESOLVED DUPLICATE of bug 1316534
Tracking Status
firefox78 --- affected
firefox79 --- affected
firefox80 --- affected

People

(Reporter: asoncutean, Unassigned)

References

Details

Attachments

(2 files)

Attached image 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
Has Regression Range: --- → no
Has STR: --- → yes
Attached file reduced html
Component: Layout → Layout: Flexbox

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

Has Regression Range: no → ---

Daniel: Thoughts?

Severity: -- → S3
Flags: needinfo?(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)

Depends on: 1316534
Flags: needinfo?(dholbert)
Priority: -- → P2

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.

Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: