html5 youtube player: vertical scrollbar width obscures quality settings text

Assigned to



2 years ago
2 years ago


(Reporter: Klaus Luppert, Assigned: karlcow)


46 Branch

Firefox Tracking Flags

(platform-rel +)


(Whiteboard: [platform-rel-Youtube][sitewait] [css] [webkit-scrollbar], URL)


(3 attachments)



2 years ago
User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0
Build ID: 20160502172042

Steps to reproduce:

watch a video on youtube like this one:

Actual results:

If more subtitles are available, the slider is cut off, which you can see here:

Expected results:

The slider shouldn't be cut off.


2 years ago
Component: Untriaged → Layout
Product: Firefox → Core


2 years ago
platform-rel: --- → ?


2 years ago
Whiteboard: [platform-rel-Youtube]


2 years ago
platform-rel: ? → +
ni? Mike to look at the scrollbars, this sounds like a previous Gmail scrollbar tech evangelism issue.
Flags: needinfo?(miket)
Created attachment 8772443 [details]
Screen Shot 2016-07-19 at 10.59.55 AM.png

Just checked and this still reproduces (on Windows 10 in v47). In a low battery situation right now away from the office, so leaving ni? to come back and diagnose.
Oh wait. This doesn't reproduce -- I misunderstood the original report description. 

Klaus, would you mind double checking? In my screenshot you can see that the scrollbar thumb isnt' cut off.
Flags: needinfo?(miket)

Comment 4

2 years ago
Sorry for the late replay, quite busy at the moment.
Yes, indeed. I have latest 47.0.1 and it looks just fine like this:

But there is a problem with one pixel height causing a useless scroll bar to appear and hiding the red 4K and HD right next to the resolutions:


2 years ago
Rank: 28
Created attachment 8795027 [details]
scrollbar when looking at quality options
Ah yeah, I can reproduce that in Windows 10 and Mac. On a hunch I think this is a site bug, so moving to tech evangelism for diagnosis.


1) visit (or presumably any video with a ton of available resolutions)
2) click on settings gear > quality

No scrollbar

Summary: html5 youtube player: slider is cut off → html5 youtube player: scrollbar
Whiteboard: [platform-rel-Youtube] → [platform-rel-Youtube][needsdiagnosis]
Summary: html5 youtube player: scrollbar → html5 youtube player: vertical scrollbar when looking at quality settings
Created attachment 8795039 [details]
scrollbar in chrome

Hmm, this also reproduces in Chrome. It's less of an issue (meaning it doesn't chop off the K in 4K) though because of the following:

.html5-video-player:not(.ytp-touch-mode) ::-webkit-scrollbar {
    width: 10px;
    background-color: #424242;
I'm not sure what the right recommendation for Youtube is here. You can tweak padding values to get it to display correctly (assuming a larger scrollbar widht) in the following style:

.ytp-menuitem[role="menuitemradio"] .ytp-menuitem-label {
    padding-left: 21px;
    padding-right: 31px;
    border-bottom: none;

But I suppose generally making a design that doesn't assume a scrollbar width (or relying on non-standard CSS psuedo-elm selectors to control the width), since that's not cross-browser.

Karl, can we get in touch with YT about this?
Flags: needinfo?(kdubost)
Summary: html5 youtube player: vertical scrollbar when looking at quality settings → html5 youtube player: vertical scrollbar width obscures quality settings text
Whiteboard: [platform-rel-Youtube][needsdiagnosis] → [platform-rel-Youtube][contactready]

Comment 9

2 years ago
fwiw this is a common issue which has a connection with the way people set their preferences, at least on MACOSX.

On MacOSX, when you go to 
1. System preferences
2. General
3. There is a menu item on displaying scrollbar. If the person chooses to always display scrollbars. It will reproduce the bug. If the settings is displayed only depending on the mouse and trackpad it will not be there.

Also the scrollbars will briefly appears/disappears if trying to scroll the black area. They also appear only if the height of the viewport is smaller than the height of the video. For example, if I put it in theater mode, there is no scrollbar. :)

I will contact YouTube about it.
Assignee: nobody → kdubost
Ever confirmed: true
Flags: needinfo?(kdubost)
Whiteboard: [platform-rel-Youtube][contactready] → [platform-rel-Youtube][contactready] [css]

Comment 10

2 years ago
Contacted YouTube today through the mailing-list.
Whiteboard: [platform-rel-Youtube][contactready] [css] → [platform-rel-Youtube][sitewait] [css]


2 years ago
Whiteboard: [platform-rel-Youtube][sitewait] [css] → [platform-rel-Youtube][sitewait] [css] [webkit-scrollbar]


2 years ago
See Also: → bug 1305028
You need to log in before you can comment on or make changes to this bug.