Grid values are -moz- prefixed in Firefox 56-58, maybe others

[meyerweb]

Prefixfree turns min-content, max-content, and probably fit-content into their -moz- versions, which FF56-58 (possibly earlier) do not recognize as valid.

[LeaVerou]

Hi Eric,

At first I was surprised, because (as you know) -prefix-free doesn't keep a list of what to prefix, it does feature testing on the current browser, so how could this happen?

However, in my testing it appears that Firefox still needs the -moz- prefix, so what -prefix-free is doing is is correct.

MDN also agrees: https://developer.mozilla.org/en-US/docs/Web/CSS/width And caniuse: http://caniuse.com/#feat=intrinsic-width

If you disagree, please provide more information (perhaps a testcase?).

[meyerweb]

I have this screenshot from the inspector; the warning icons’ tooltips read “Invalid property value”.

Once I remove Prefixfree from the page, the grid unprefixed values are recognized by FF as valid and the grid works as expected. If needed, I could probably work up a simple pair of tests tomorrow.

[LeaVerou]

Yes, a pair of tests would be very useful, thank you!

[meyerweb]

Here’s a pair of simple grids without Prefixfree loaded: http://meyerweb.com/eric/css/tests/bugs/prefixfree-off.html Here’s the same grids and styles with Prefixfree loaded: http://meyerweb.com/eric/css/tests/bugs/prefixfree-on.html

The CSS will appear to be different between the two unless you view source. There are, as noted in the “off” test page, no actual prefixes in the document source, even though they’re displayed in Firefox. (Which I find fascinating.)

[LeaVerou]

This is insane. Turns out Firefox not only doesn't require, but doesn't even accept prefixes on min-content etc for the grid properties, but requires them for width!!!

That's a first!

[meyerweb]

Wowzers.

[mike-okon]

Is it just me , but Im experiencing the opposite error. Adding no prefixes to the code Firefox is adding them in itself and then reading them as errored lines and thus not displaying correctly. (Chrome shows grid layout as intended)

Am using Developer Edition 60.0b4 (64 bit)

This is driving me insane as I keep having to scroll and check and remove every -moz by hand each time I need to check layout

[LeaVerou]

-prefix-free tests if a prefix is needed for min-content and the like by testing them on width. Is there any chance that Firefox needs a prefix there but not in Grid? That would be my top guess.