Closed
Bug 1057683
Opened 10 years ago
Closed 10 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 :: Site Reports, defect)
Web Compatibility
Site Reports
Tracking
(Not tracked)
RESOLVED
FIXED
People
(Reporter: dholbert, Unassigned)
References
()
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.
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
Reporter | ||
Updated•10 years ago
|
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)
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
Reporter | ||
Updated•10 years ago
|
OS: Linux → All
Hardware: x86_64 → All
Version: unspecified → Trunk
Reporter | ||
Comment 3•10 years ago
|
||
Reporter | ||
Updated•10 years ago
|
Whiteboard: [suggested fix for site's CSS in comment 1]
Reporter | ||
Comment 4•10 years ago
|
||
No word back yet. Tweeted, in case that helps: https://twitter.com/CodingExon/status/505036871739514880
Comment 6•10 years ago
|
||
Mobile is affected too (as per bug 1060913)
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!
Comment 8•10 years ago
|
||
That's great to hear, thanks for your outreach on this one Daniel.
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)
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Assignee | ||
Updated•6 years ago
|
Product: Tech Evangelism → Web Compatibility
You need to log in
before you can comment on or make changes to this bug.
Description
•