Currently I'm using IE10 10.0.9200.16438 on Windows7, but problem was also on win8.

That test's using the old syntax isn't it? Check out the latest spec: http://www.w3.org/TR/css3-flexbox/

I wouldn't be surprised if IE10 has just implemented this, and not the old spec. This one looks about right in IE10 on Win 8: http://jsfiddle.net/YYVWT/

I think IE10 implemented the awkward stage where it changed rather quickly and therefore it's a complete mess. It's not quite the legacy not quite the new flexbox. Not sure how we can handle this...

Modernizr.flexbox currently checks for the flex-wrap property which are available both the current and the old drafts so it should return true in IE10. I checked http://jsfiddle.net/wGBL8/5/ with IE10 for Win7 too and it says true. @oskarwrobel could you check the document mode your IE is on?

@ryanseddon - I guess the first question is what we're detecting:

1. Just the latest implementation?
2. Any flexbox implementation?
   • If so it might make sense to have Modernizr.flexbox.2009, Modernizr.flexbox.2011 and Modernizr.flexbox.2012
   • Not sure if Modernizr.flexbox should then be the OR of these, or just an alias for Modernizr.flexbox.2012?

I have no idea what the timeline might be for IE to upgrade to the latest spec, so option 2 would give users the most power to leverage it.

It should be easy enough to write some tests tailored to each spec - Chris Coyier's article could be a good starting point.

Well we have flexboxlegacy for the initial implementation and flexbox should be the latest.

So we do :) Could add the 2011 syntax as flexboxtransitional or flexboxtweener something?

The issue seems to be that the flexbox test is not testing for the latest flexbox spec, but the "tweener" version as well as the latest.

e.g. IE10 doesn't support the latest display: flex... but display: flexbox, but modernizrs current check doesn't find this.

Agreed.

Ping @ryanseddon - thoughts on adding a flexboxtweener test and updating the existing flexbox test to only capture the latest spec?

Current -
flexbox checks flexWrap
flexboxlegacy checks boxDirection

Propose -
flexbox checks flexBasis
flexboxlegacy checks flexWrap
or fleboxtweener

Tested and using this locally to separate IE10 implementation from Chromes implementation.

FYI we've talked about this a bit ago. #744

@ct5845 - flexWrap would be true for the latest flexbox spec too.

How about:

Modernizr.addTest('flexbox', testAllProps('flexBasis'));

Modernizr.addTest('flexboxlegacy', testAllProps('boxDirection'));

Modernizr.addTest('flexboxtweener', testAllProps('flexAlign'));

Results:

Thoughts?

Thanks @myakura

From the chart above, it looks like the current suggestion isn't catching any browsers for "flexboxtweener", when it should be catching IE 10, since IE10 supports "-ms-flex-align" per http://msdn.microsoft.com/en-us/library/ie/jj127298%28v=vs.85%29.aspx

That's worth investigating; I think IE is the only browser to have the "flexboxtweener" keyword-names, so if we're not detecting that, then flexboxtweener support becomes significantly less valuable.

Sorry, I did the chart wrong 😄 IE10 returned true for that test. Amended.

Oh, good :)

Which version will this land in?

If someone fancies doing a pull request, we can try and get it in for v3.0...

Any estimate on when v3 will be released? Need to see if I can do this …

Assigned to myself to do a PR.

What's the status of this fix?

Just tested using Modernizr 2.7.1 (latest generated from Modernizr site) in IE10 and it's still reporting flexbox support, which is not accurate.

Its in master, which is v3.0

@patrickkettner Thanks for the info, but apologies, the grunt/jekyll stuff is new to me. I tried using the new generator I found http://v3.modernizr.com/download/, but it looks like some of the test names have changed. So replicating my Modernizr 2.x selections didn't exactly work. Guess I'll wait for the official 3.0 release (found a workaround for flexbox another way).

Hey @brendanf! no problem at all.
One thing, though, is that the names are changing, so you will need to update if you want to support 3.0 in the future. All 2.x stuff should have a 3.x equivalent. I would be more than happy to help port you over to the new stuff if you'd like!

@patrickkettner No worries, I can hang until the idiot-proof generator for 3.x is ready. I like being able to copy-back the setting URL to make alterations too, and that gets a bit too tedious with teammates when selecting features is manual and the names are changing. Sticking with 2.x works better for now.

is there any ETA for the 3.0 release ? Or any plan to backport this fixed detection to 2.x ?

is there any ETA for the 3.0 release?

ASAP

Or any plan to backport this fixed detection to 2.x ?

Yes. In the next day or three.

@patrickkettner Did you backport the updated flexbox detection to 2.x? I could be wrong, but I can't see it in the latest version (2.8.3). Thanks!

Looks like 2.8.3 does not have flexboxtweener tests for IE10, but—

The 3.x generator for mortals is working, so I was able to port to the beta version which does include the flexboxtweener test. Just had to swap the naming of touch to touchevents in my CSS. Otherwise working for me.

I'm still seeing flexbox in IE10, has flexboxtweener been backported?

I am also getting flexbox in IE10 again without it actually supporting full flexbox. My modernizr.js did not changed and it worked before.
I assume this has something to do with IE10 on Windows 10.
Can anyone compare win 8.1 & win 10 feature detection and reply?

IE 10 doesn't exist on windows 10

But IE10 compatibility exists in Windows 10 for testing purposes.
And with that enabled modernizr thinks that flexbox is fully working.
On windows 8.1 and IE10 compatibility it didn't.

But IE10 compatibility exists in Windows 10 for testing purposes.

I work at Microsoft on Edge/IE, and it 100% does not exist for testing purposes. IE 10 mode exists in IE 11 for compatibility mode with poorly made websites, but the amount of people that are on IE 11 are very quickly going away to Edge.

I am confused, are you saying windows 8 IE 10, or windows 10 IE 10