False positive Modernizr.flexwrap for Safari

[fredrikekelund]

Safari, both current and previous versions, as well as both desktop and mobile, does not support the flex-wrap property. Here's a fiddle where it can be tested.

[hexalys]

Sadly the prefixed -webkit- implementation which Safari still hasn't updated doesn't support flexWrap. Seem like the Modernizr v3 test may be failing for looking at the WebkitFlexWrap property which is exposed despite the lack of support.

The way around this would be to use only on the non-prefixed FlexWrap property as reliable signal. I don't think any of the prefixed implementations on any browser support(ed) FlexWrap.

[fredrikekelund]

Thanks for the detailed response. Since Modernizr doesn't determine support for flexbox through the flexwrap test, it's important that the specific flexwrap test can actually be relied on. I think it'd be a good idea to test only the unprefixed version.

[hexalys]

@fredrikekelund Actually I ought to correct myself, flexwrap is now supported on newer versions (I was still thinking of Safari 6 in my earlier comment and I only use QupZilla on 10.6.8 to test newer Safari vs.). See caniuse showing support with Safari 7.1+.

Your jsfiddle code has probably hit a bug. That's probably why it's not working:

1. Note: Don't use display: flex; on the flex items, only on its container, unless you want nested flex boxes.
2. To enable wrapping you'll need to need to specifically set flex: auto (equivalent to flex: 1 1 auto;) or set both property flex-shrink: 1;and flex-basis: auto. The flex: 1; you have in your code does flex: 1 1 0px; technically allowing shrink, but apparently there is a bug with the webkit prefixed version in Safari which does not allow a flex wrap in that condition, while it correctly does on the unprefixed version of Chrome and Firefox.

So it's working with Safari 7.1+ but it seems buggy when used with a -webkit-flex-basis of 0px;

See my stackoverflow answer on a similar issue for more info. And see your working updated fiddle.

Thanks for revealing the bug though. What version were you using just to be clear? 7.1?

The bug was present with Chrome 27 (prefixed) and doesn't seem to be fixed in Safari 8 as per this test

[patrickkettner]

Hey guys!
Sorry for going so long without a reply :[

So, as @hexalys pointed out, -webkit-flex-wrap does work in Safari > 6.0, which is where we start reporting as true.

As a result, I don't think we should be reporting only on the unprefixed version. If you want that, just gate the check with .flexbox as well (ie Modernizr.flexbox && Modernizr.flexwrap, or .flexbox.flexwrap .selector)