Closed Bug 1090540 Opened 5 years ago Closed 5 years ago

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

Categories

(Web Compatibility :: Desktop, defect)

defect
Not set

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: dholbert, Unassigned)

References

(Blocks 1 open bug, )

Details

(Whiteboard: [fix in coment 5] [Local stylish hackaround: https://userstyles.org/styles/106693 ])

Attachments

(2 files)

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.
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.)
OS: Linux → All
Hardware: x86_64 → All
Version: unspecified → Trunk
Attachment #8513003 - Attachment description: screencast showing the bug & the fix → screencast showing the bug (and the fix, at 0:25)
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.
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.
Summary: Google Inbox has overlapping content in Amazon purchase summaries, due to implied minimum size of flex item → Google Inbox has overlapping content in Amazon purchase summaries & email subject-lines, due to implied minimum size of flex item
Attachment #8513003 - Attachment description: screencast showing the bug (and the fix, at 0:25) → screencast showing bug w/ amazon purchase summaries (and the fix, at 0:25)
Attachment #8513006 - Attachment description: screencast showing bug w/ subject lines (and the fix, at 0:33) → screencast showing overflowing content w/ subject lines (and the fix, at 0:33)
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.)
Summary: Google Inbox has overlapping content in Amazon purchase summaries & email subject-lines, due to implied minimum size of flex item → Google Inbox has overflowing/overlapping content in Amazon purchase summaries & email subject-lines, due to implied minimum size of flex item
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
Whiteboard: [fix in coment 5]
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.)
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.)
Whiteboard: [fix in coment 5] → [fix in coment 5] [Local stylish hackaround: https://userstyles.org/styles/106693 ]
(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).)
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!
Status: NEW → RESOLVED
Closed: 5 years ago
Flags: needinfo?(jackalmage)
Resolution: --- → FIXED
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.