Closed Bug 1057683 Opened 6 years ago Closed 6 years ago

http://i100.independent.co.uk/ is broken in Nightly, due to the new "min-height:auto" flex item behavior (from flexbox spec change)

Categories

(Web Compatibility :: Desktop, defect)

defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: dholbert, Unassigned)

References

(Blocks 1 open bug, )

Details

(Whiteboard: [suggested fix for site's CSS in comment 1])

Attachments

(1 file)

http://i100.independent.co.uk/ is not usefully scrollable in Nightly -- the content runs off the bottom of the page, and there are scrollbars from an overflow:scroll element, but the overflowing is happening at a higher level than that element, so no scrollbar appears.

cpeterson says the regression range included this change:
> bug 984711 - Add back "min-width:auto" / "min-height:auto" for flex items.

...which means this is almost certainly a case where the site's CSS needs updating to account for this new flex-item min-sizing feature.
In particular, the element with id "wrapper" needs "min-height:0".

It is a flex item (i.e. its parent is "display:flex"), which means the flexbox spec now requires that we measure its min-content height (the height required to lay out all its children -- not considering the "overflow" property on them) and use that as a minimum height.

This means it ends up being many, many pages tall, which makes it stick out of its parent flex container -- when the author's intent was for it to simply fill its parent.

To prevent it from getting this huge minimum height, this element needs an explicit "min-height:0".

Here's a user-style for Stylish to demonstrate this fix:
 https://userstyles.org/styles/104609/i100-independent-co-uk-flexbox-workaround
Summary: http://i100.independent.co.uk/ was broken by the "min-height:auto" introduction → http://i100.independent.co.uk/ is broken in Nightly, due to the new "min-height:auto" flex item behavior (from flexbox spec change)
I just sent the following email to the email listed on their "contact us" page for technical problems (customerservices at independent dot co dot uk).  I'll update this bug report if & when I hear back.

SUBJECT:
Bug report: The site i100.independent.co.uk is broken in Firefox Nightly & needs CSS tweak to be compatible with updated CSS flexbox spec

BODY:


Hi independent.co.uk,

I'm one of the software engineers behind the Firefox web browser, and
I'm contacting you to report an issue that's preventing your site from
rendering correctly in our Nightly development builds (which will become
our release builds in ~14 weeks, and which will be reaching our alpha /
beta users in the interim time).

Right now, in Firefox Nightly, the site renders without functional
scrollbars, due to a change in the CSS Flexbox spec which I've
implemented in Firefox Nightly. This spec-change was designed (by the
spec editors) to be unlikely to break most pre-existing content, but
you're unlucky enough to have hit one of the edge cases such that your
content is broken after this change.

Fortunately, the fix is very easy. This stylesheet:
  http://i100.independent.co.uk/css/responsive.css
just needs this one line added to the "#wrapper" section:
  min-height:0;

With that added line, that element won't overflow its container anymore,
and the site will work correctly.

For more details, see this bug page:
 https://bugzilla.mozilla.org/show_bug.cgi?id=1057683
and if you're curious, the spec change that caused this problem is the
"Implied Minimum Size of Flex Items" section here:
 http://dev.w3.org/csswg/css-flexbox/#min-size-auto

Please feel free to contact me if you have any questions about this --
and I'd appreciate it if you could give me a heads-up when you look into
fixing this.

Thanks!
Daniel Holbert
Firefox Platform Engineer
OS: Linux → All
Hardware: x86_64 → All
Version: unspecified → Trunk
Whiteboard: [suggested fix for site's CSS in comment 1]
Duplicate of this bug: 1060913
Mobile is affected too (as per bug 1060913)
Good news! I got a response via email that they've made the change on a dev branch and will be testing and releasing asap. So, it sounds like this should be fixed soon!
That's great to hear, thanks for your outreach on this one Daniel.
This has now been fixed in the site's CSS!
In particular:
 1) The scrollbar is functional, in Firefox Nightly
 2) I verified that http://i100.independent.co.uk/css/responsive.css has "min-height: 0" at the end of the #wrapper style rule. (as suggested in comment 2)
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.