Daniel Holbert [:dholbert] Reporter
	Description • 10 years ago

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.

	Daniel Holbert [:dholbert] Reporter
	Comment 1 • 10 years ago

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

	Daniel Holbert [:dholbert] Reporter
	Comment 2 • 10 years ago

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

	Daniel Holbert [:dholbert] Reporter
	Comment 4 • 10 years ago

No word back yet. Tweeted, in case that helps: https://twitter.com/CodingExon/status/505036871739514880

	Aaron Train [:aaronmt]
	Comment 6 • 10 years ago

Mobile is affected too (as per bug 1060913)

	Daniel Holbert [:dholbert] Reporter
	Comment 7 • 10 years ago

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!

	Mike Taylor [:miketaylr]
	Comment 8 • 10 years ago

That's great to hear, thanks for your outreach on this one Daniel.

	Daniel Holbert [:dholbert] Reporter
	Comment 9 • 10 years ago

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)