(One of the site devs emailed me about this problem, so we're in touch if it turns out they're doing something wrong) STR) 1) visit https://klappat.nu/produkter in Firefox 49+ Expected: products are presented in a grid Actual: single row with no visible products Flipping layout.css.prefixes.webkit to false fixes this bug.

They're using this Yahoo! flow library: (and including it twice...minified and unminified): https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/grids-min.css https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/grids-core-min.css .pure-g { letter-spacing: -.31em; *letter-spacing: normal; *word-spacing: -.43em; text-rendering: optimizespeed; font-family: FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif; display: -webkit-flex; -webkit-flex-flow: row wrap; display: -ms-flexbox; -ms-flex-flow: row wrap; -ms-align-content: flex-start; -webkit-align-content: flex-start; align-content: flex-start; } If I disable the display: -webkit-flex rule (which should just map to display: flex), the site behaves as I would expect. (You have to disable it twice because they include it twice). The product blocks themselves are all display: inline-block and have responsive breakpoints to control their widths: @media screen and (min-width: 64em) .pure-u-lg-1, .pure-u-lg-1-1, .pure-u-lg-1-2, .pure-u-lg-1-3, .pure-u-lg-2-3, .pure-u-lg-1-4, .pure-u-lg-3-4, .pure-u-lg-1-5, .pure-u-lg-2-5, .pure-u-lg-3-5, .pure-u-lg-4-5, .pure-u-lg-5-5, .pure-u-lg-1-6, .pure-u-lg-5-6, .pure-u-lg-1-8, .pure-u-lg-3-8, .pure-u-lg-5-8, .pure-u-lg-7-8, .pure-u-lg-1-12, .pure-u-lg-5-12, .pure-u-lg-7-12, .pure-u-lg-11-12, .pure-u-lg-1-24, .pure-u-lg-2-24, .pure-u-lg-3-24, .pure-u-lg-4-24, .pure-u-lg-5-24, .pure-u-lg-6-24, .pure-u-lg-7-24, .pure-u-lg-8-24, .pure-u-lg-9-24, .pure-u-lg-10-24, .pure-u-lg-11-24, .pure-u-lg-12-24, .pure-u-lg-13-24, .pure-u-lg-14-24, .pure-u-lg-15-24, .pure-u-lg-16-24, .pure-u-lg-17-24, .pure-u-lg-18-24, .pure-u-lg-19-24, .pure-u-lg-20-24, .pure-u-lg-21-24, .pure-u-lg-22-24, .pure-u-lg-23-24, .pure-u-lg-24-24 { display: inline-block; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } @media screen and (min-width: 48em) .pure-u-md-1-3, .pure-u-md-8-24 { width: 33.3333%; } And if I disable the display: -webkit-flex; and -webkit-flex-flow: row wrap; rules in Chrome, there's no change in layout for them. Not sure why right now. Daniel, any insight?

(In reply to Mike Taylor [:miketaylr] from comment #1) > If I disable the display: -webkit-flex rule (which should just map to > display: flex) [...] (and I believe it does here) > the site behaves as I would expect. (You have to disable it > twice because they include it twice). When you disable it, it's left "display:block" -- and the site seems to work nicely if this element is "display:block". (Hooray for graceful fallback!) So, the problem seems to be due to a difference in modern-CSS-flexbox-behavior, between Chrome & Firefox... Specifically, something to do with height computations. (If I give pure-g an explicit tall height, this renders more nicely.) And in particular: this seems to be a version of bug 958714. The flex items here (the tiles in the "grid") are sized using "padding-bottom: 20%;" styles. In Firefox, that resolves to 0, because it it resolves against the container's height which is indefinite [due to it having no explicit height & shrinkwrapping its children]. In Chrome (and in block layout in all browserS), that resolves against the container's width.

The site is similarly-broken in Microsoft Edge, for the same reason. (They behave like we do [i.e. the way the spec used to require, until it was relaxed a bit], with respect to vertical percentages on flex items.)

Ah, OK. I hadn't tested Edge yet. I'll shoot the site dev an email and suggest their fall-back behavior as something that works cross-browser right now. And perhaps time will tell how Bug 958714 shakes out.

I've emailed the dev (no response yet). I don't want to just dupe this against Bug 958714 (so it doesn't fall off our radars), so I'm gonna set it as blocked. (someone can feel free to revert that or configure a different bug relationship if they feel strongly)

The page has changed to https://klappat.nu/Produkter.html, and it looks like they've changed the design.