Closed Bug 1305028 Opened 8 years ago Closed 5 years ago

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

Categories

(Web Compatibility :: Site Reports, defect, P3)

defect

Tracking

(platform-rel +, firefox49 wontfix, firefox50 wontfix, firefox51 wontfix, firefox52 wontfix, firefox-esr52 wontfix, firefox-esr60 wontfix, firefox53 wontfix, firefox54 wontfix, firefox55 wontfix, firefox65 wontfix, firefox66 wontfix, firefox67 wontfix, firefox68 fixed)

RESOLVED FIXED
Tracking Status
platform-rel --- +
firefox49 --- wontfix
firefox50 --- wontfix
firefox51 --- wontfix
firefox52 --- wontfix
firefox-esr52 --- wontfix
firefox-esr60 --- wontfix
firefox53 --- wontfix
firefox54 --- wontfix
firefox55 --- wontfix
firefox65 --- wontfix
firefox66 --- wontfix
firefox67 --- wontfix
firefox68 --- fixed

People

(Reporter: avaida, Assigned: denschub)

References

()

Details

(Keywords: regression, Whiteboard: [platform-rel-Youtube][platform-rel-Google] [sitewait] [css] [js])

Attachments

(3 files)

[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.
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.
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.
platform-rel: --- → ?
Priority: -- → P3
platform-rel: ? → +
Whiteboard: [platform-rel-youtube]
Sounds like a possible dupe of bug 1243385.
(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).
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?
Component: Layout → Desktop
Flags: needinfo?(kdubost)
Product: Core → Tech Evangelism
Whiteboard: [platform-rel-youtube] → [platform-rel-youtube][contactready]
That looks like the same family as Bug 1275196
See Also: → 1275196
Summary: The vertical scrollbar displayed for the main pane is partially overlapped by the video itself on YouTube Gaming → gaming.youtube.com - The vertical scrollbar displayed for the main pane is partially overlapped by the video itself
Contacted YouTube today.
Assignee: nobody → kdubost
Status: NEW → ASSIGNED
Flags: needinfo?(kdubost)
Whiteboard: [platform-rel-youtube][contactready] → [platform-rel-youtube] [sitewait] [css] [js]
Whiteboard: [platform-rel-youtube] [sitewait] [css] [js] → [platform-rel-Youtube][platform-rel-Google] [sitewait] [css] [js]
we are a week away from RC, too late, this is now a wontfix for 50.
Rank: 50
(In reply to Karl Dubost :karlcow from comment #8)
> Contacted YouTube today.

Karl, is there any update from YouTube ?
Flags: needinfo?(karl)
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.
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.
Depends on: 1432935
Given Youtube hasn't fixed this yet, it might just be simpler to implement ::-webkit-scrollbar and fix it that way.
Product: Tech Evangelism → Web Compatibility

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.

See Also: → 1536767

(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?

Flags: needinfo?(dschubert)

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. :)

Assignee: kdubost → dschubert
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Flags: needinfo?(karl)
Flags: needinfo?(dschubert)
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: