1090540 - Google Inbox has overflowing/overlapping content in Amazon purchase summaries & email subject-lines, due to implied minimum size of flex item

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Daniel Holbert [:dholbert]]

STR:
 1. Get a Google Inbox invite, and have a recent amazon purchase ship notification in your gmail.
 2. Use e.g. User Agent Overrider add-on to make Firefox spoof Chrome's user agent.
 3. Log into Google Inbox from Firefox (spoofing Chrome's user agent)

ACTUAL RESULTS:
The image for your shipped amazon item is overlapping the title.

EXPECTED RESULTS:
No overlapping.


This is an instance of bug 1043520 -- content that's broken by the implied minimum size of flex items. In this case, we have basically:

<div style="display:flex">
 <div>
  <img>
 </div>

 <div>
  <div style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap">
   Long text long text long text long text
  </div>
 </div>

</div>

The second flex item (wrapping the overflow:hidden element) takes its implied minimum size from its child's min-content size, which is the length of the long text.

This makes it extremely large w/ no ability to shrink.  So, the first flex item (wrapping the image) is forced to shrink all the way to 0. (The image has a fixed size, so *it* doesn't shrink; only its wrapper shrinks. So, the text ends up overlapping the image.)

The fix here is for the second flex item to get "min-width:0", to disable its implied minimum size (which comes from "min-width:auto"). I verified locally that this fixes the issue.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screencast showing bug w/ amazon purchase summaries (and the fix, at 0:25)

Here's a screencast showing the bug & the fix.

(I recorded this using firefox's "responsive design view" to load the page in just a small area of the Firefox window, so that only a portion of my email is visible, for privacy reasons.)

Comment 2

[Daniel Holbert [:dholbert]]

This doesn't affect Chrome (yet) because they haven't implemented "min-width:auto" for flex items yet. (That's tracked in http://code.google.com/p/chromium/issues/detail?id=426898 )

It would be good to get this fixed in the site now, though, so that it works sooner for people using other browsers like Firefox, and so that it continues to work in Chrome after that Blink issue is fixed.

Comment 3

[Daniel Holbert [:dholbert]]

There's an almost-identical problem with email subject lines. Lumping it into this bug, since it's essentially the same thing. Screencast coming up.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: screencast showing overflowing content w/ subject lines (and the fix, at 0:33)

Comment 5

[Daniel Holbert [:dholbert]]

So, the fix (at least in my case) is to add "min-width:0" to the .gN and the .rb CSS rules.  I haven't played around with this too much yet; I suspect there are other elements that will need it, as well. 

These are all instances of the scenario that I described to www-style here (which there's no good fix for, aside from having the author add "min-width:0"):
  http://lists.w3.org/Archives/Public/www-style/2014Jul/0589.html

(Really, there's a good chance the site needs "min-width:0" anywhere that it has "flex: 1 1 0%". That will preserve the behavior that Chrome currently gives for that style, at least.)

Comment 6

[Daniel Holbert [:dholbert]]

Reached out to (I think) one of Google's Inbox devs, who's been responsive to feedback on Hacker News recently: https://twitter.com/CodingExon/status/527217770128084992

Comment 7

[Daniel Holbert [:dholbert]]

Should've mentioned -- this is likely only an issue in Firefox 34 (currently Beta) and newer, because that's when bug 984711 & bug 1015474 landed (giving us "min-width:auto", with non-zero minimum sizes for flex items, by default).

So -- to reproduce this, you'll need to be using Firefox Beta or newer. (I'm using Nightly.)

Comment 8

[Daniel Holbert [:dholbert]]

In the meantime, I've posted a Stylish hackaround that anyone can use to fix this locally, here:
 https://userstyles.org/styles/106693

(Mostly for demonstration purposes; the site seems to have various other non-layout-related issues [e.g. buttons not working, "Loading" sticking around forever], so it's not really usable in Firefox yet, even with this overlap fixed.)

Comment 9

[Daniel Holbert [:dholbert]]

(Tab, would you mind filing an internal bug about this? Not sure whether my my inbox-dev twitter-ping in comment 6 had any effect.  See comment 0 & comment 5 for description of the problem & the solution (just some targeted applications of min-width:0 sauce).)

Comment 10

[Daniel Holbert [:dholbert]]

I just got a "Take me to Inbox" prompt in Gmail (in Firefox Nightly), and clicking it took me to a working view of Google Inbox.

I can confirm that this bug is fixed there -- I don't see any obvious overflow, and after some inspection w/ devtools, I do indeed see "min-width:0" on various flex items.

So, this seems to be fixed. Hooray!