1275196 - html5 youtube player: vertical scrollbar width obscures quality settings text

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[Klaus Luppert]

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:
https://www.youtube.com/watch?v=IhSUvCfjP5Q


Actual results:

If more subtitles are available, the slider is cut off, which you can see here:
https://drive.google.com/open?id=0B4y5u0gBKYqbalBySmhDTHpuNEU


Expected results:

The slider shouldn't be cut off.

Comment 1

[Mike Taylor [:miketaylr]]

ni? Mike to look at the scrollbars, this sounds like a previous Gmail scrollbar tech evangelism issue.

Comment 2

[Mike Taylor [:miketaylr]]

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

Comment 3

[Mike Taylor [:miketaylr]]

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.

Comment 4

[Klaus Luppert]

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:
https://drive.google.com/file/d/0B4y5u0gBKYqbZVY0cXlmelBKVEk/view?usp=sharing

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:
https://drive.google.com/file/d/0B4y5u0gBKYqbcURDYWJHZUVQc0k/view?usp=sharing

Comment 5

[Mike Taylor [:miketaylr]]

Attachment: scrollbar when looking at quality options

Comment 6

[Mike Taylor [:miketaylr]]

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.

STR)

1) visit https://www.youtube.com/watch?v=IhSUvCfjP5Q (or presumably any video with a ton of available resolutions)
2) click on settings gear > quality

Expected:
No scrollbar

Actual:
Scrollbar

Comment 7

[Mike Taylor [:miketaylr]]

Attachment: 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;
}

Comment 8

[Mike Taylor [:miketaylr]]

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?

Comment 9

[Karl Dubost💡 :karlcow]

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.

Comment 10

[Karl Dubost💡 :karlcow]

Contacted YouTube today through the mailing-list.

Comment 11

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 12

[Jeroen Kruis]

The YT video player has since been modified and this issue no longer exists.