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

Status: RESOLVED FIXED

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

Description

[gvp9000]

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
[url=http://s284.photobucket.com/user/gvp9000/media/chrome_zpstx5ssg78.jpg.html][img]http://i284.photobucket.com/albums/ll3/gvp9000/chrome_zpstx5ssg78.jpg[/img][/url]

With firefox 40.0.2 with all addons disabled
[url=http://s284.photobucket.com/user/gvp9000/media/firefox_zpsfsvg4q3z.jpg.html][img]http://i284.photobucket.com/albums/ll3/gvp9000/firefox_zpsfsvg4q3z.jpg[/img][/url]

Comment 1

[gvp9000]

Attachment: firefox vs chrome.jpg

Comment 2

[gvp9000]

chrome: http://i284.photobucket.com/albums/ll3/gvp9000/c_zpsaqancnqn.jpg
firefox: http://i284.photobucket.com/albums/ll3/gvp9000/f_zpslrixkh9p.jpg

Comment 3

[Loic]

Same result with old versions like FF17 or FF8. Works with IE11. Spoofing the UA doesn't change anything.

Maybe YouTube bug.

Comment 4

[Alice0775 White]

Pushlog:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=e302cef502f6&tochange=efad576d17ce

Triggered by: Bug 312156

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


WorkAround:

.GQb  {
  min-width:300px !important;
}

Comment 5

[Alice0775 White]

better workaround:
.qZpD9d  {
min-width:150px !important;
}

Comment 6

[gvp9000]

how can I apply this workaround ?

Comment 7

[Loic]

I'd say Greasemonkey + custom userscript for YouTube.

Comment 8

[gvp9000]

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://*youtube.com/*
// @version     1
// @grant       none
// ==/UserScript==
.qZpD9d  {
min-width:150px !important;
}

Comment 9

[arni2033]

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: https://dl.dropboxusercontent.com/s/93wpq1ha6oaw7sl/video%20-%20Bug%201199415%20-%20Can%27t%20view%20the%20number%20of%20videos%20in%20the%20tooltip%20when%20hovering%20the%20name%20of%20a%20channel%20in%20YouTube.webm?dl=0).
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.

@[e-mail]:
That tooltip is actually iframe with src="https://apis.google.com/...". Install Stylish [https://addons.mozilla.org/en-US/firefox/addon/stylish/] and create new style with the following code:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("apis.google.com") {
  .GQb
  {
    width: calc(100% - 20px);
  }
}

Comment 10

[Loic]

Mozilla needs to contact YT. CC'ing Chris who has contact at YT.

Comment 11

[arni2033]

Attachment: testcase (with explanations of my point of view) - bug 1199415 - possible issues with text overflow ellipsis.htm

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

Comment 12

[Chris Peterson [:cpeterson]]

Steven, this problem looks like a YouTube bug. What is the best way to report web compat issues to the YouTube front end team?

Comment 13

[Mats Palmgren (inactive)]

Attachment: Testcase #2

The grey box is an inline-block.  It clearly overflows its container.

https://drafts.csswg.org/css-ui/#text-overflow
says that "... implementations must hide characters and _atomic
inline-level elements_ ...", the underlined link there is to:
http://www.w3.org/TR/CSS21/visuren.html#inline-boxes
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.

Comment 14

[Mats Palmgren (inactive)]

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.

Comment 15

[Hallvord R. M. Steen [:hallvors]]

Karl, you have YT contacts - right?

Comment 16

[Karl Dubost💡 :karlcow]

We have contacts with Google. ^_^


Exploring the content of the info card I see:


<div class="obc">
   <a href="//plus.google.com/u/0/106537418020976092947" target="_blank" title="（Google+）">
     <span class="MDd dI"></span>
   </a>
   <div class="GQb">
      <a class="zvd" href="//youtube.com/user/Iksan2006?feature=hovercard" target="_parent">Илья Сычев</a>
      <a class="qZpD9d" href="//youtube.com/channel/UCMSRklPbUAfc5Cj9FdfLrfw/videos?feature=hovercard" target="_parent">動画 77 本</a>
   </div>
   <div class="kOc">
      <div class="Jvd"></div>
   </div>
</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.
code.google.com/p/chromium/issues/detail?id=443159

Comment 17

[Mats Palmgren (inactive)]

> code.google.com/p/chromium/issues/detail?id=443159

That looks like a different problem.  I filed a new bug:
https://code.google.com/p/chromium/issues/detail?id=534798

Comment 18

[Mike Taylor [:miketaylr]]

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?

Comment 19

[Karl Dubost💡 :karlcow]

Ah sorry about that. Completely missed the opening of the bug on Chromium.

Contact has been made. :) Usual channel.

Comment 20

[Mike Taylor [:miketaylr]]

(clearing ni? -- looks like I set hotlist-interop back in April)

Comment 21

[Mike Taylor [:miketaylr]]

(assigning to Karl since he did the outreach here)

Comment 22

[Jonathan Watt [:jwatt]]

Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.)

Comment 23

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 24

[Jeroen Kruis]

Youtube no longer shows this popup.