Closed Bug 1256664 Opened 8 years ago Closed 8 years ago

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

Categories

(Core :: Layout, defect)

defect
Not set
normal

Tracking

()

VERIFIED DUPLICATE of bug 1257688
Tracking Status
firefox46 --- unaffected
firefox47 --- unaffected
firefox48 --- unaffected

People

(Reporter: sbadau, Unassigned)

References

(Blocks 1 open bug, )

Details

(Keywords: regression, testcase, top100)

Attachments

(2 files)

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.
[Tracking Requested - why for this release]: Visual regression in Firefox 47 on a popular website.
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
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.
Blocks: 1213126
Attached file 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;
Flags: needinfo?(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)
Flags: needinfo?(dholbert)
Summary: Yahoo News Feed title is cut off → Yahoo News Feed title is cut off (due to use of modern flexbox to emulate -webkit-box, and default "flex-shrink:1")
Depends on: 1257688
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.
Status: NEW → RESOLVED
Closed: 8 years ago
Flags: needinfo?(simona.marcu)
Resolution: --- → FIXED
Resolution: FIXED → DUPLICATE
No longer depends on: 1257688
(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.
Flags: needinfo?(simona.marcu)
Great, thank you!
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.