Closed Bug 1199415 Opened 9 years ago Closed 2 years ago

Can't view the number of videos in the tooltip when hovering the name of a channel in YouTube due to text-overflow: ellipsis


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

Windows 7


(platform-rel +)

Tracking Status
platform-rel --- +


(Reporter: gvp9000, Assigned: karlcow)


(Blocks 1 open bug, )


(4 keywords, Whiteboard: [sitewait] [css] [platform-rel-Youtube] rank 45)


(3 files)

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0
Build ID: 20150812163655

Steps to reproduce:

In every youtube video in any language if you put the cursor over the name of the uploader I can't see the total number of videos of this uploader.

Actual results:

Instead of showing the total number of videos the firefox shows three dots 

Expected results:

With chrome

With firefox 40.0.2 with all addons disabled
Attached image firefox vs chrome.jpg
OS: Unspecified → Windows 7
Hardware: Unspecified → x86_64
Same result with old versions like FF17 or FF8. Works with IE11. Spoofing the UA doesn't change anything.

Maybe YouTube bug.
Summary: Can't view the number of videos in a channel in Youtube → Can't view the number of videos in the tooltip when hovering the name of a channel in YouTube

Triggered by: Bug 312156

Probably, this is the site problem caused by fixed sized layout.... :(


.GQb  {
  min-width:300px !important;
better workaround:
.qZpD9d  {
min-width:150px !important;
how can I apply this workaround ?
I'd say Greasemonkey + custom userscript for YouTube.
Thank you but it doesn't work ... (sorry first time I use greasemonkey)

// ==UserScript==
// @name        Youtube No uploads
// @namespace   gvp
// @description Youtube No uploads
// @include     https://**
// @version     1
// @grant       none
// ==/UserScript==
.qZpD9d  {
min-width:150px !important;
Omg, I didn't even KNOW that something is supposed to be there!!! // another example of Fx UX

(In reply to Alice0775 White from comment #5)
Your 1st fix isn't so good, and the 2nd one is even worse (sorry, maybe it works with your japanese locale. But watch the video:
Check my possible solution in the end of comment and tell if you think it's bad.

(In reply to Loic from comment #7)
> I'd say Greasemonkey + custom userscript for YouTube.
Why do you suggest Greasemonkey for this? Anyway, how should this bug be resolved? Should we report it to Youtube developers? Lets do this Right Now(!) since we got a solution.
That tooltip is actually iframe with src="". Install Stylish [] and create new style with the following code:

@namespace url(;

@-moz-document domain("") {
    width: calc(100% - 20px);
Flags: needinfo?(epinal99-bugzilla2)
Mozilla needs to contact YT. CC'ing Chris who has contact at YT.
Flags: needinfo?(epinal99-bugzilla2) → needinfo?(cpeterson)
I'm sorry for bug spam again, bug I thought this still may be the issue with ellipsis implementation.
Please read my testcase with explanations (I also mentioned the solution we could send to YT)

Also, I've mistaken Alice0775's first workaround was actually OK
Component: Untriaged → Layout
Flags: needinfo?(cpeterson)
Product: Firefox → Core
Summary: Can't view the number of videos in the tooltip when hovering the name of a channel in YouTube → Can't view the number of videos in the tooltip when hovering the name of a channel in YouTube due to text-overflow: ellipsis
Ever confirmed: true
Whiteboard: [parity-Chrome][parity-Edge][parity-IE]
Steven, this problem looks like a YouTube bug. What is the best way to report web compat issues to the YouTube front end team?
Attached file Testcase #2
The grey box is an inline-block.  It clearly overflows its container.
says that "... implementations must hide characters and _atomic
inline-level elements_ ...", the underlined link there is to:
which says that 'display:inline-block' is atomic.

So the inline-block should be removed, as a whole, and an ellipsis
inserted after what remains on the line, i.e. the "L".

So this is clearly a bug in Chrome.
For the "Without the text element ("L")" example -- yeah, this is a known issue
(covered by bug 851875, bug 712894 I think), it's a rare edge case though so not
very high priority to fix.

I filed bug 1204877 for the "There should be no overflow because all text is
fully visible" example.  Note that there *is* overflow in that example too,
but it might be worth considering not ellipsing that specific case.
Component: Layout → Desktop
Product: Core → Tech Evangelism
Version: 40 Branch → unspecified
Karl, you have YT contacts - right?
Flags: needinfo?(kdubost)
We have contacts with Google. ^_^

Exploring the content of the info card I see:

<div class="obc">
   <a href="//" target="_blank" title="(Google+)">
     <span class="MDd dI"></span>
   <div class="GQb">
      <a class="zvd" href="//" target="_parent">Илья Сычев</a>
      <a class="qZpD9d" href="//" target="_parent">動画 77 本</a>
   <div class="kOc">
      <div class="Jvd"></div>

So the content is there, just not displayed.

There is indeed a different rendering in between Blink and Gecko. I doubt we will get YouTube to change something which is working on Chrome, except maybe if there is an opened bug on Blink.
It looks like this bug is pretty close.
Flags: needinfo?(kdubost)

That looks like a different problem.  I filed a new bug:
Karl, now we have a bug in Comment #17. Perhaps you can tag that as "Hotlist-interop" with your Chromium bug tracker powers.

This still reproduces, can we ask Google to take a look?
Flags: needinfo?(kdubost)
Ah sorry about that. Completely missed the opening of the bug on Chromium.

Contact has been made. :) Usual channel.
Flags: needinfo?(kdubost)
Whiteboard: [parity-Chrome][parity-Edge][parity-IE] → [parity-Chrome][parity-Edge][parity-IE] [sitewait] [css]
platform-rel: --- → ?
Whiteboard: [parity-Chrome][parity-Edge][parity-IE] [sitewait] [css] → [parity-Chrome][parity-Edge][parity-IE] [sitewait] [css] [platform-rel-Youtube]
platform-rel: ? → +
Flags: needinfo?(miket)
(clearing ni? -- looks like I set hotlist-interop back in April)
Flags: needinfo?(miket)
Whiteboard: [parity-Chrome][parity-Edge][parity-IE] [sitewait] [css] [platform-rel-Youtube] → [parity-Chrome][parity-Edge][parity-IE] [sitewait] [css] [platform-rel-Youtube] rank 45
Rank: 45
(assigning to Karl since he did the outreach here)
Assignee: nobody → kdubost
Priority: -- → P3
Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.)
Whiteboard: [parity-Chrome][parity-Edge][parity-IE] [sitewait] [css] [platform-rel-Youtube] rank 45 → [sitewait] [css] [platform-rel-Youtube] rank 45
Product: Tech Evangelism → Web Compatibility

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Youtube no longer shows this popup.

Closed: 2 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.