1235114 - On Google Play Music "top charts" page, long album titles cause text to overflow

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[thechrisclayton]

Attachment: issue.jpg

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:43.0) Gecko/20100101 Firefox/43.0
Build ID: 20151221130713

Steps to reproduce:

Log in to Google Play Music with the latest version of Flash installed, click on 'Top charts' and then 'See all' for a number of examples of the album title text issue. Tested with the latest Firefox stable both on an older and fresh profile, plus also tested on the latest Nightly. Issue remains on both.


Actual results:

Albums with long titles have their text creeping out of the edges of each album entry, instead of staying within the box itself. I have included a screenshot and have circled the issue on a number of album entries.


Expected results:

When testing on Chrome, all albums titles remain inside the box and are simply not completely shown (the title is obscured properly if it's too long). On Firefox, the title isn't obscured if too long, but comes right out of the box and looks very odd.

Comment 1

[alex_mayorga]

Attachment: bug-1235114.PNG

¡Hola Chris!

FWIW this seems to WFM on Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:46.0) Gecko/20100101 Firefox/46.0 ID:20151226030212 CSet: 4a559a618d6798eb9a8fdc559f5a7a00085e2062 sans Flash.

Perhaps this is Windows 10 or Flash thing?

¡Gracias!

Comment 2

[Abe - QA (:Abe_LV)]

Environment:
User Agent Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:46.0) Gecko/20100101 Firefox/46.0
Nightly 46.0a1 Build ID:20151228030213

and

User Agent Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:46.0) Gecko/20100101 Firefox/46.0
Nightly 46.0a1 Build ID:20151228030213


It is reproducible. Text continued out of the box. This does not occur in chrome browser.

Comment 3

[Abe - QA (:Abe_LV)]

Attachment: text display.PNG

Comment 4

[Daniel Holbert [:dholbert]]

I see what alex_mayorga sees (not what Abe sees) -- in other words, I can't reproduce.  I do have an album name that is too long, and its name fades out & is cropped instead of overflowing. (Devtools show me that it's in an "overflow:hidden" element.

I'm using latest nightly 46.0a1 (2015-12-28), on Ubuntu Linux w/ Firefox Nightly.  I also tried latest nightly on Windows 10 & can't reproduce there either.

So, without being able to investigate further myself, my theory is that they're serving different content based on user (maybe locale?) & based on browser.

Abe, since you can reproduce, could you try a few things:
 (1) See if Chrome can handle the content that they're serving to you in Firefox, by saving the bug-inducing content & loading it directly in Chrome:
   (a) Reproduce the bug in Firefox
   (b) File | Save Page As, & choose a place on your computer, and make sure "Web Page, complete" is chosen as "type" in the save dialog.
   (c) open the resulting page in Chrome.

 (2) See if Firefox can handle the content that they send to Chrome (by spoofing a Chrome user-agent string)
   (a) installing https://addons.mozilla.org/en-US/firefox/addon/user-agent-overrider/
   (b) find the User Agent Overrider icon (it goes in Firefox's hamburger menu for me) and click it
   (c) pick e.g. "Chrome 30 / Windows"
   (d) load the Google Music page

Thanks!

Comment 5

[Abe - QA (:Abe_LV)]

(In reply to Daniel Holbert [:dholbert] from comment #4)
> I see what alex_mayorga sees (not what Abe sees) -- in other words, I can't
> reproduce.  I do have an album name that is too long, and its name fades out
> & is cropped instead of overflowing. (Devtools show me that it's in an
> "overflow:hidden" element.
> 
> I'm using latest nightly 46.0a1 (2015-12-28), on Ubuntu Linux w/ Firefox
> Nightly.  I also tried latest nightly on Windows 10 & can't reproduce there
> either.
> 
> So, without being able to investigate further myself, my theory is that
> they're serving different content based on user (maybe locale?) & based on
> browser.
> 
> Abe, since you can reproduce, could you try a few things:
>  (1) See if Chrome can handle the content that they're serving to you in
> Firefox, by saving the bug-inducing content & loading it directly in Chrome:
>    (a) Reproduce the bug in Firefox  
>    (b) File | Save Page As, & choose a place on your computer, and make sure
> "Web Page, complete" is chosen as "type" in the save dialog.
>    (c) open the resulting page in Chrome.

When I open the saved web page with chrome, the issue disappears. It works fine.

>  (2) See if Firefox can handle the content that they send to Chrome (by
> spoofing a Chrome user-agent string)
>    (a) installing
> https://addons.mozilla.org/en-US/firefox/addon/user-agent-overrider/
>    (b) find the User Agent Overrider icon (it goes in Firefox's hamburger
> menu for me) and click it
>    (c) pick e.g. "Chrome 30 / Windows"
 I picked " Windows/Chrome 34"  as it does show "chrome 30" 
>    (d) load the Google Music page

I still able to reproduce. No change.  
> 
> Thanks!

Sorry for the late reply. I still able to reproduce this in Ubuntu 14.04 and Win 7 machines.  The issue is reproducible both in FF43 and latest nightly.

My environment after the addon:

Version 	46.0a1
Build ID 	20160107030235
Update Channel 	nightly
User Agent 	Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.137 Safari/537.36

Comment 6

[Daniel Holbert [:dholbert]]

OK, thanks.  I still can't reproduce. :-/  I'm guessing Google must be sending you different styles/content than it's sending to me, and the key ingredient is something locale-dependent, or album-dependent, or google-account-dependent (e.g. maybe if you've signed up for some other service in the past, they style things differently). Or maybe they're just A/B testing some new styles.

Anyway -- Abe, would you be up for trying to create a reduced (or partially-reduced) testcase from your saved Google page? That's probably the best next step here. Or: if you could email me a zipped version of the saved page with its resources, I can poke around in devtools (assuming I can reproduce) and see what I can find.

(I probably wouldn't post a full .zip of your saved page publicly until you've minimized it, since there's a chance it contains personal information associated with the "your-logged-in-google-account" button at the upper right.)

Comment 7

[Abe - QA (:Abe_LV)]

Hi Daniel, I sent the zip file to [e-mail].

Comment 8

[Daniel Holbert [:dholbert]]

Thanks! That showed me the right section of the page to look at -- "top charts" (which I now see was mentioned in comment 0 but I skimmed past it. :-/ Sorry, silly me).  I *can* reproduce the bug on that section of Google Music.

I can also reproduce the bug there in Chrome Dev Edition (on the live site & in your attached zip).

Inspecting with devtools shows that this is an issue of bug 1043520 -- Google probably needs to add "min-width:0" to their .material-card .details-inner rule, or else the long-unwrappable-text makes its flex item (the protruding thing) grow unreasonably long (longer than the available space) to fit the text.

This affects all browsers that support "min-width:auto" on flex items, which includes Firefox & Edge & Chrome Dev Edition at least. (chrome versions with the fix for https://code.google.com/p/chromium/issues/detail?id=426898 )  Converting to a Tech Evang issue; Google Play (or the material design library version that they're using) just needs to update.

Comment 9

[Daniel Holbert [:dholbert]]

Attachment: screenshot of bug reproducing in Chrome dev edition

Comment 10

[Daniel Holbert [:dholbert]]

Attachment: screencast showing the fix that's needed

Comment 11

[Daniel Holbert [:dholbert]]

Summarizing the bug:
The song title is a flex item, and flex items refuse to be smaller than their minimum intrinsic width (which in this case is the width of the full album-title), unless they're explicitly given "min-width:0". So, Google needs to add "min-width:0" (or some other smallish min-width) to the "details-inner" CSS class, to allow the song title to shrink.

I'm guessing this only "works" in Chrome 47 (current release) due to a bug with calculating the minimum intrinsic width, and that bug is fixed in DevEdition 49, which is why the site bug shows up there.

Comment 12

[Daniel Holbert [:dholbert]]

(I've reached out to Google, and a googler has already forwarded my report along to the Play Music team, so hopefully we'll see action on this soon. Hooray!)

Comment 13

[Daniel Holbert [:dholbert]]

Karl, thanks for the whiteboard update. I actually just re-tested this, and it looks like this it's been fixed -- hooray!

Specifically:
 * I can't reproduce the symptoms anymore (and I do see some names that are too long & fade out as expected, on the "top charts" page).
 * Looking in devtools, I can see that the style rule for ".material-card .details-inner" now has "min-width:0", here:
     https://play-music.gstatic.com/fe/61b406b8f69c820108c5b9957a0a8760/listenstyles.css
   (as we suggested in comment 11).

So: resolving as FIXED.

@thechrisclayton and/or @Abe, it'd be great if you could confirm that this is fixed for you as well. Thanks!

Comment 14

[Abe - QA (:Abe_LV)]

User Agent 	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:46.0) Gecko/20100101 Firefox/46.0
Version 	46.0a1
Build ID 	20160125030203
Update Channel 	nightly

    and

User Agent 	Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/43.0
Version 	43.0.4
Build ID 	20160105164030
Update Channel 	release

Works for me both in the latest nightly and release versions.

Comment 15

[thechrisclayton]

@dholbert I can definitely confirm that this issue has fixed, using the latest Firefox stable (43.0.4). Thanks a lot for looking at this to all involved, I really appreciate that!