Closed Bug 1238580 Opened 7 years ago Closed 6 years ago

Part of the line is missing at sabq.org, due to nonzero "margin-bottom" and modern flex items being shrinkable by default (unlike flex items in "-webkit-box")

Categories

(Core :: CSS Parsing and Computation, defect)

defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 1257688

People

(Reporter: over68, Unassigned)

References

(Blocks 1 open bug, )

Details

(Keywords: regression)

Attachments

(3 files)

Blocks: 1213126
Keywords: regression
Hi blinky,

Can you provide steps to find that text that is cut off? For example, click on this link or button, then scroll, etc. Or a link to that specific section?

In Nightly I don't currently see anything wrong, but I'm probably looking at the wrong part of the page...
Flags: needinfo?(over68)
Steps to reproduce:

1. Go to https://dl.dropboxusercontent.com/u/95157096/85f61cf7/om6bkv1fux.html.
2. Go to the middle of the page "yellow part".

See https://dl.dropboxusercontent.com/u/95157096/85f61cf7/0dl6pl7y60.mp4
Flags: needinfo?(over68)
Summary: Part of the line is missing → Part of the line is missing, due to missing -webkit-line-clamp support
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Windows 7 → All
Hardware: x86_64 → All
Summary: Part of the line is missing, due to missing -webkit-line-clamp support → Part of the line is missing at sabq.org, due to emulating -webkit-box with flexbox, & modern flexbox's min-height:auto behavior
Version: 46 Branch → Trunk
Attached file 1238580.html
A small example of the style from the page, with max-width changed to 200px to force more than 3 lines.
Sorry, my analysis in comment 4 is not correct. Tagging it as obsolete.

The *real* culrprit here is some "margin" styling, combined with "overflow:hidden" and some duplicated nested max-height values.

Specifically, we have
  <a class="home-ellipsis">
    <p class="ellipsis ng-binding">
      Text text text
   </p>
  </a>

The <a> and the <p> each have:
  display:block; display: -webkit-box;
  margin: 0 0 10px;
  max-height: 48.2px;
  overflow:hidden;

In Firefox release (without -webkit-box emulation), the bottom-margins collapse (between nested blocks), and each nested div ends up 48.2px tall, which happens to be just the right height.

In Firefox Nightly (with -webkit-box emulation), the bottom-margins *do not* collapse (because modern flexbox doesn't collapse adjacent margins). So the inner flexbox (the <p>) has a 10px margin taking up 10px of the 48.2px that the parent made available, which leaves only 38.2px for this inner flexbox.  (Normally it would force itself to be at least as tall as its intrinsic size, by virtue of it being a flex item; but its "overflow:hidden" styling disables that behavior.)

In Chrome, as in Nightly, the bottom-margins *do not* collapse, BUT the flex item also does not shrink by default -- so its margin just (imperceptibly) overflows its parent.  This is because flex items are not shrinkable by default in old-school flexbox. (They have a default "-webkit-box-flex: 0", which controls both growing and shrinking. In contrast, modern-flexbox has a default "flex-shrink: 1", which allows items to shrink if there's not enough space.)
Summary: Part of the line is missing at sabq.org, due to emulating -webkit-box with flexbox, & modern flexbox's min-height:auto behavior → Part of the line is missing at sabq.org, due to "margin-bottom"
Summary: Part of the line is missing at sabq.org, due to "margin-bottom" → Part of the line is missing at sabq.org, due to "margin-bottom" and modern flex items being shrinkable by default
Summary: Part of the line is missing at sabq.org, due to "margin-bottom" and modern flex items being shrinkable by default → Part of the line is missing at sabq.org, due to "margin-bottom" and modern flex items being shrinkable by default (unlike flex items in "-webkit-box")
Summary: Part of the line is missing at sabq.org, due to "margin-bottom" and modern flex items being shrinkable by default (unlike flex items in "-webkit-box") → Part of the line is missing at sabq.org, due to nonzero "margin-bottom" and modern flex items being shrinkable by default (unlike flex items in "-webkit-box")
Right, that's just where we added support for "-webkit-box-orient: vertical". That's what lets us have a vertical main-axis here, and the (default-in-modern-flexbox) "flex-shrink: 1" mentioned in comment 7 only takes effect in the main axis.

In any case, I think it makes sense to consider this a regression from bug 1213126 (enabling webkit prefix support), and a dependency of bug 1238668 (cases where modern flexbox & old-style -webkit-box disagree).
One more webcompat issue with this same underlying cause (modern flex items being shrinkable by default, which makes display:flex imperfect for emulating -webkit-box): https://github.com/webcompat/web-bugs/issues/2267
I've verified that this became fixed in today's Nightly (broken yesterday, working today). I checked the original sabq.org site and scrolled down to the "yellow part" mentioned above & shown in comment 0's screenshot.
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1257688
(Here's a screenshot of the site with the bug fixed -- text no longer clipped.)
This is awesome progress, thanks Daniel!
You need to log in before you can comment on or make changes to this bug.