Wrong flexbox detection on IE10? #812

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

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

This comment has been minimized.

Show comment
Hide comment
@oskarwrobel

oskarwrobel Feb 12, 2013

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

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

@stucox

This comment has been minimized.

Show comment
Hide comment
@stucox

stucox Feb 12, 2013

Member

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/

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

This comment has been minimized.

Show comment
Hide comment
@ryanseddon

ryanseddon Feb 13, 2013

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

Member

ryanseddon commented Feb 13, 2013

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

This comment has been minimized.

Show comment
Hide comment
@myakura

myakura Feb 14, 2013

Contributor

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?

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@stucox

stucox Feb 14, 2013

Member

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

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

This comment has been minimized.

Show comment
Hide comment
@ryanseddon

ryanseddon Feb 14, 2013

Member

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

Member

ryanseddon commented Feb 14, 2013

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

@stucox

This comment has been minimized.

Show comment
Hide comment
@stucox

stucox Feb 14, 2013

Member

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

Member

stucox commented Feb 14, 2013

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

@ct5845

This comment has been minimized.

Show comment
Hide comment
@ct5845

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

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

This comment has been minimized.

Show comment
Hide comment
@stucox

stucox Mar 28, 2013

Member

Agreed.

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

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

This comment has been minimized.

Show comment
Hide comment
@ct5845

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

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

This comment has been minimized.

Show comment
Hide comment
@myakura

myakura Mar 28, 2013

Contributor

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

Contributor

myakura commented Mar 28, 2013

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

@stucox

This comment has been minimized.

Show comment
Hide comment
@stucox

stucox Mar 28, 2013

Member

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

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

This comment has been minimized.

Show comment
Hide comment
@stucox

stucox Mar 28, 2013

Member

Thanks @myakura

Member

stucox commented Mar 28, 2013

Thanks @myakura

@dholbert

This comment has been minimized.

Show comment
Hide comment
@dholbert

dholbert Mar 28, 2013

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.

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

This comment has been minimized.

Show comment
Hide comment
@stucox

stucox Mar 28, 2013

Member

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

Member

stucox commented Mar 28, 2013

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

@dholbert

This comment has been minimized.

Show comment
Hide comment
@dholbert

dholbert Mar 28, 2013

Oh, good :)

Oh, good :)

@fbender

This comment has been minimized.

Show comment
Hide comment
@fbender

fbender Apr 1, 2013

Which version will this land in?

fbender commented Apr 1, 2013

Which version will this land in?

@stucox

This comment has been minimized.

Show comment
Hide comment
@stucox

stucox Apr 2, 2013

Member

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

Member

stucox commented Apr 2, 2013

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

@fbender

This comment has been minimized.

Show comment
Hide comment
@fbender

fbender Apr 4, 2013

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

fbender commented Apr 4, 2013

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

@ghost ghost assigned stucox May 17, 2013

@stucox

This comment has been minimized.

Show comment
Hide comment
@stucox

stucox May 17, 2013

Member

Assigned to myself to do a PR.

Member

stucox commented May 17, 2013

Assigned to myself to do a PR.

stucox added a commit to stucox/Modernizr that referenced this issue May 17, 2013

@stucox stucox closed this in #936 Jul 6, 2013

stucox pushed a commit that referenced this issue Jul 6, 2013

Stu Cox
Merge pull request #936 from stucox/flex
Updated flexbox tests to better capture all 3 specs; fixes #812
@brendanfalkowski

This comment has been minimized.

Show comment
Hide comment
@brendanfalkowski

brendanfalkowski Mar 29, 2014

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.

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

This comment has been minimized.

Show comment
Hide comment
@patrickkettner

patrickkettner Mar 29, 2014

Member

Its in master, which is v3.0

Member

patrickkettner commented Mar 29, 2014

Its in master, which is v3.0

@brendanfalkowski

This comment has been minimized.

Show comment
Hide comment
@brendanfalkowski

brendanfalkowski Mar 30, 2014

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

This comment has been minimized.

Show comment
Hide comment
@patrickkettner

patrickkettner Mar 31, 2014

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!

Member

patrickkettner commented Mar 31, 2014

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

This comment has been minimized.

Show comment
Hide comment
@brendanfalkowski

brendanfalkowski Mar 31, 2014

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

@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

This comment has been minimized.

Show comment
Hide comment
@stof

stof Nov 25, 2014

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

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

This comment has been minimized.

Show comment
Hide comment
@patrickkettner

patrickkettner Nov 27, 2014

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.

Member

patrickkettner commented Nov 27, 2014

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

This comment has been minimized.

Show comment
Hide comment
@channeladam

channeladam Jan 8, 2015

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

@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

This comment has been minimized.

Show comment
Hide comment
@brendanfalkowski

brendanfalkowski Feb 5, 2015

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.

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 pushed a commit to patrickkettner/Modernizr that referenced this issue Feb 22, 2015

patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this issue Feb 22, 2015

Stu Cox
Merge pull request #936 from stucox/flex
Updated flexbox tests to better capture all 3 specs; fixes #812

@zowers zowers referenced this issue in ProLoser/Flexbox.less Apr 2, 2015

Closed

use modernizr instead of explicit @spec parameter #11

@gkiely

This comment has been minimized.

Show comment
Hide comment
@gkiely

gkiely Aug 25, 2015

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

gkiely commented Aug 25, 2015

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

@couchcrew-thomas

This comment has been minimized.

Show comment
Hide comment
@couchcrew-thomas

couchcrew-thomas Sep 10, 2015

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?

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

This comment has been minimized.

Show comment
Hide comment
@patrickkettner

patrickkettner Sep 10, 2015

Member

IE 10 doesn't exist on windows 10

Member

patrickkettner commented Sep 10, 2015

IE 10 doesn't exist on windows 10

@couchcrew-thomas

This comment has been minimized.

Show comment
Hide comment
@couchcrew-thomas

couchcrew-thomas Sep 11, 2015

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.
And with that enabled modernizr thinks that flexbox is fully working.
On windows 8.1 and IE10 compatibility it didn't.

@patrickkettner

This comment has been minimized.

Show comment
Hide comment
@patrickkettner

patrickkettner Sep 11, 2015

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

Member

patrickkettner commented Sep 11, 2015

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