Wrong flexbox detection on IE10? #812

Closed
oskarwrobel opened this Issue Feb 12, 2013 · 34 comments

Projects

None yet
@oskarwrobel

Hi,

In my example on IE10 Modernizr.flexbox return true but looks like IE10 it doesn't understand flexbox css. Or maybe I'm doing something wrong?

Please take a look: http://jsfiddle.net/wGBL8/5/

(On safari Modernizr.flexbox return false, but everything looks fine)

@oskarwrobel

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

@stucox
Member
stucox commented Feb 12, 2013

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/

@ryanseddon
Member

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...

@myakura
myakura commented Feb 14, 2013

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?

@stucox
Member
stucox commented Feb 14, 2013

@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.

@ryanseddon
Member

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

@stucox
Member
stucox commented Feb 14, 2013

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

@ct5845
ct5845 commented Mar 28, 2013

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.

@stucox
Member
stucox commented Mar 28, 2013

Agreed.

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

@ct5845
ct5845 commented Mar 28, 2013

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.

@myakura
myakura commented Mar 28, 2013

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

@stucox
Member
stucox commented Mar 28, 2013

@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:

detectChrome 14Chrome 26Firefox 21IE 10
flexbox
flexboxlegacy
flexboxtweener

Thoughts?

@stucox
Member
stucox commented Mar 28, 2013

Thanks @myakura

@dholbert

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.

@stucox
Member
stucox commented Mar 28, 2013

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

@dholbert

Oh, good :)

@fbender
fbender commented Apr 1, 2013

Which version will this land in?

@stucox
Member
stucox commented Apr 2, 2013

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

@fbender
fbender commented Apr 4, 2013

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

@stucox stucox was assigned May 17, 2013
@stucox
Member
stucox commented May 17, 2013

Assigned to myself to do a PR.

@stucox stucox added a commit to stucox/Modernizr that referenced this issue May 17, 2013
@stucox stucox Updated flexbox tests to better capture all 3 specs; fixes #812 17cb2dc
@stucox stucox closed this in #936 Jul 6, 2013
@brendanfalkowski

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.

@patrickkettner
Member

Its in master, which is v3.0

@brendanfalkowski

@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).

@patrickkettner
Member

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!

@brendanfalkowski

@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.

@craigteegarden craigteegarden referenced this issue in ariya/phantomjs May 28, 2014
Closed

update modernizr to 2.8.2 #12274

@stof
stof commented Nov 25, 2014

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

@patrickkettner
Member

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.

@channeladam

@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!

@brendanfalkowski

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.

@patrickkettner patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this issue Feb 22, 2015
@stucox stucox Updated flexbox tests to better capture all 3 specs; fixes #812 376997e
@zowers zowers referenced this issue in ProLoser/Flexbox.less Apr 2, 2015
Closed

use modernizr instead of explicit @spec parameter #11

@gkiely
gkiely commented Aug 25, 2015

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

@couchcrew-thomas

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?

@patrickkettner
Member

IE 10 doesn't exist on windows 10

@couchcrew-thomas

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.

@patrickkettner
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment