1256664 - Yahoo News Feed title is cut off (due to use of modern flexbox to emulate -webkit-box, and default "flex-shrink:1")

Status: VERIFIED DUPLICATE of bug 1257688

(Core :: Layout, defect)

Description

[Simona Badau, Desktop QA]

Attachment: Screenshot with the issue.png

Mozilla/5.0 (Windows NT 6.3; rv:48.0) Gecko/20100101 Firefox/48.0
Build ID: 20160314030215

[Affected versions]:
- Nightly 48.0a1
- Firefox Developer Edition 47.0a2


[Affected platforms]:
- Windows
- Mac OS X
- Ubuntu 

[Steps to reproduce]:
1. Launch Firefox
2. Log-in to Yahoo mail: https://mail.yahoo.com/
3. In the upper left side click on News Feed
4. Look at the feeds title 

[Expected result]:
- The title is properly displayed.

[Actual result]:
- The title is cut off (please see the screenshot for more details.)

[Regression range]:
- Not reproducible on the latest Firefox 46 Beta 1. I will come back with a regression range as soon as possible.

Comment 1

[Simona Badau, Desktop QA]

[Tracking Requested - why for this release]: Visual regression in Firefox 47 on a popular website.

Comment 2

[Simona Badau, Desktop QA]

Last good revision: 31edd1840c5f651b5dbf182fdb7f04fe98c88d86
First bad revision: 9fbf850dc78d7197132a298f9ec0270c7de16a13
Pushlog:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=31edd1840c5f651b5dbf182fdb7f04fe98c88d86&tochange=9fbf850dc78d7197132a298f9ec0270c7de16a13

Looks like the following bug has the changes which introduced the regression:
https://bugzilla.mozilla.org/show_bug.cgi?id=1213126

Comment 3

[Simona Badau, Desktop QA]

Mozilla/5.0 (Windows NT 6.3; rv:46.0) Gecko/20100101 Firefox/46.0
Build ID: 20160307215824

The issue is reproducible also on the latest Firefox 46 beta 1 if the preference "layout.css.prefixes.webkit" is set to true.

Comment 4

[Mats Palmgren (inactive)]

Attachment: Testcase

The clipped title seems to be caused by the combination of the following values:
	display: -webkit-box;
	max-height: 13px;

This is what seems to avoid clipping in Chrome:
	padding-bottom: 7px;

Comment 5

[Daniel Holbert [:dholbert]]

I suspect what's really (or also) avoiding clipping in Chrome is the fact that flex items aren't shrinkable by default in the -webkit-box layout system. (unlike modern flexbox, where everything is shrinkable by default [down to its min-width].)

So I think this is the same issue as bug 1238580 -- we need to suppress the default "flex-shrink:1" for flex items that are inside of a "-webkit-box", for better -webkit-box emulation with modern flexbox.

(In reply to Simona B [:simonab] from comment #1)
> [Tracking Requested - why for this release]: Visual regression in Firefox 47
> on a popular website.

Canceling this request, as this bug isn't actually going to ship past Aurora for the time being (definitely not in the Firefox 47 timeframe).  Webkit CSS emulation is behind a pref which is turned off by default in beta/release builds for now. (bug 1238827)

Comment 6

[Daniel Holbert [:dholbert]]

Simona, would you mind verifying that this is fixed for you, in the latest Nightly? (2016-04-06)

It's fixed for me (by bug 1257688) in latest Firefox desktop Nightly, using the attached testcase.

Comment 8

[Simona Badau, Desktop QA]

(In reply to Daniel Holbert [:dholbert] from comment #6)
> Simona, would you mind verifying that this is fixed for you, in the latest
> Nightly? (2016-04-06)
> 
> It's fixed for me (by bug 1257688) in latest Firefox desktop Nightly, using
> the attached testcase.

Verified that the patch from Bug 1257688 also fixes my issue on the latest Nightly 48 (build ID: 20160406030221) on Mac OS X, Ubuntu 14.04 and Windows 8.1.

Comment 9

[Daniel Holbert [:dholbert]]

Great, thank you!