1305028 - gaming.youtube.com - The vertical scrollbar displayed for the main pane is partially overlapped by the video itself

Status: RESOLVED FIXED

(Web Compatibility :: Desktop, defect, P3)

Description

[Andrei Vaida [:avaida]]

Attachment: screenshot from Mac OS X 10.11.1

[Affected versions]:
  - 48.0.2-build1
  - 49.0-build4, 49.0.1-build3
  - 50.0b1-build2
  - 50.0a2
  - 51.0a2 (2016-09-22)
  - 52.0a1 (2016-09-22)

[Affected platforms]:
  - Windows 7 x64, Windows 10 x64
  - Mac OS X 10.11.1

[Steps to reproduce]:
  1. Launch Firefox.
  2. Open a random video from YouTube Gaming 
    (e.g.) https://gaming.youtube.com/watch?v=QE-cHgOdtfQ
  3. Reduce the width of the browser window while the video is
     playing. If you're on Windows, snapping it to one of the sides of your
     screen via windows-key + left/right arrow will have the same effect.
  4. Check the vertical scrollbar displayed right next to the video itself.

[Expected result]:
  - The scrollbar looks and works properly, in any browser window size.

[Actual result]:
  - The scrollbar works as it should, but it's partially overlapped by the
  video itself.
  - Maximizing the browser window fixes it.

[Regression range]:
  - This might be a regression, but not a recent one. I'll try to pin point
  the culprit via mozregression, as soon as possible.

[Additional notes]:
  - Ubuntu is unaffected.

Comment 1

[Andrei Vaida [:avaida]]

Attachment: screenshot from Windows 10 x64

Comment 2

[Andrei Vaida [:avaida]]

Just one additional note: Opera 40.0 (40.0.2308.62), Google Chrome 53 (53.0.2785.116), Microsoft Edge (38.14393.0.0) and Safari 9.0.1 (11601.2.7.2) are not affected by this bug.

Comment 3

[Alice0775 White]

Although the scrutiny has not,
The site seems to be fixed layout by JavaScript.
And they seem to assume the fixed width of the scroll bar = 12px.

File: https://gaming.youtube.com/s/gaming/2ed5533e/gaming_polymer.js
Line 8736

On Windows10,
Firefox: the vertical scrollbar width = ~16px(is compliant with the OS theme). So, layout is broken.
Chrome/Edige: the vertical scrollbar width is narrower than the OS theme which is not compliant with the OS theme.

Comment 4

[Liz Henry (:lizzard Please n-i to RyanVM, jcristau, or pascal)]

Sounds like a possible dupe of bug 1243385.

Comment 5

[Mike Taylor [:miketaylr]]

(In reply to Liz Henry (:lizzard) (needinfo? me) from comment #4)
> Sounds like a possible dupe of bug 1243385.

Seems like they're different issues: Bug 1243385 is about scroll perf/jank. This is about the the scrollbar track appearing under the video (there is some layout jank when resizing the viewport, but I think that's mostly due to the assumptions Youtube is making about scrollbar width).

Comment 6

[Mike Taylor [:miketaylr]]

In https://gaming.youtube.com/s/gaming/2ed5533e/gaming_polymer.js

H.SCROLLBAR_WIDTH=12;

calculatePlayerSize_:function(){
  var a=window.innerWidth-H.SCROLLBAR_WIDTH,b=window.innerHeight-H.TOOLBAR_HEIGHT;this.sidebarCollapsed||...

So yeah, this also reproduces in IE because they have wider scrollbar tracks than Edge does (which is closer to Chrome's width).

I'd recommend they not have a design that relies on hard-coded assumptions about scrollbar widths. Possibly easier said than done though...

Karl, can we get in touch with YouTube about this?

Comment 7

[Karl Dubost💡 :karlcow]

That looks like the same family as Bug 1275196

Comment 8

[Karl Dubost💡 :karlcow]

Contacted YouTube today.

Comment 9

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

we are a week away from RC, too late, this is now a wontfix for 50.

Comment 10

[Astley Chen (inactive)]

(In reply to Karl Dubost :karlcow from comment #8)
> Contacted YouTube today.

Karl, is there any update from YouTube ?

Comment 11

[Emil Ghitta, QA [:emilghitta]]

The regression range of this issue is hard to find due to the fact that gaming.youtube is not supported in older builds.
I have also managed to reproduce this issue using old supported builds and I have concluded that, due tot this fact, this might not be a regression.

Comment 12

[Mike Taylor [:miketaylr]]

Yeah, I'm not sure why this is tracked as a regression - the site is hardcoded to expect a certain scrollbar track width (see Comment #6). AFAIK we haven't changed that.

Comment 13

[Mike Taylor [:miketaylr]]

Given Youtube hasn't fixed this yet, it might just be simpler to implement ::-webkit-scrollbar and fix it that way.

Comment 14

[Dennis Schubert [:denschub]]

Attachment: WebCompat GoFaster intervention - GitHub Pull Request

As discussed with Mike, we'll address this issue as part of a Proof-of-Concept WebCompat intervention. Attaching the Pull Request for reference, and to create a paper trail to that work.

Comment 15

[Pascal Chevrel:pascalc]

(In reply to Dennis Schubert [:denschub] from comment #14)

Created attachment 9051235 [details] [review]
WebCompat GoFaster intervention - GitHub Pull Request

As discussed with Mike, we'll address this issue as part of a Proof-of-Concept WebCompat intervention. Attaching the Pull Request for reference, and to create a paper trail to that work.

Dennis, when will this fix be deployed and for which versions of Firefox?

Comment 16

[Dennis Schubert [:denschub]]

Hi Pascal, this is actually shipping in 68 with bug 1536767, but I got stuck on other tasks so I didn't find the time to verify and close the issues until now. Sorry for the delays here. :)