New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Seems like IE ignores calc in more instances than shorthand #32

Closed
corysimmons opened this Issue Apr 4, 2015 · 15 comments

Comments

Projects
None yet
5 participants
@gregwhitworth

This comment has been minimized.

Show comment
Hide comment
@gregwhitworth

gregwhitworth Apr 4, 2015

Collaborator

Hey Cory, can you be more specific in regards to which IE version you're testing as I'm not seeing this behavior in IE11.
calc-longhands-test

Collaborator

gregwhitworth commented Apr 4, 2015

Hey Cory, can you be more specific in regards to which IE version you're testing as I'm not seeing this behavior in IE11.
calc-longhands-test

@gregwhitworth

This comment has been minimized.

Show comment
Hide comment
@gregwhitworth

gregwhitworth Apr 4, 2015

Collaborator

Oh, and here's the JSBin with your testcase: http://jsbin.com/keziveguna/1/edit?output

Collaborator

gregwhitworth commented Apr 4, 2015

Oh, and here's the JSBin with your testcase: http://jsbin.com/keziveguna/1/edit?output

@corysimmons

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Apr 4, 2015

Same JSBin doesn't work in IE10. I don't have IE11 (pretty big VM), but yeah, flex-basis doesn't seem to work in IE10. :(

corysimmons commented Apr 4, 2015

Same JSBin doesn't work in IE10. I don't have IE11 (pretty big VM), but yeah, flex-basis doesn't seem to work in IE10. :(

@mestaritonttu

This comment has been minimized.

Show comment
Hide comment
@mestaritonttu

mestaritonttu Apr 5, 2015

win8_ie_10 0
Screenshot from Browserstack IE10.

IE11 works ok, checked locally in Win 7.

mestaritonttu commented Apr 5, 2015

win8_ie_10 0
Screenshot from Browserstack IE10.

IE11 works ok, checked locally in Win 7.

@corysimmons

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Apr 5, 2015

If anyone of decent JS skill is interested in working on the calc polyfill for this, I'd really appreciate it: closingtag/calc-polyfill#9

Without IE10 support for calc in Flexbox, I can't build one of my grids in it... =[

corysimmons commented Apr 5, 2015

If anyone of decent JS skill is interested in working on the calc polyfill for this, I'd really appreciate it: closingtag/calc-polyfill#9

Without IE10 support for calc in Flexbox, I can't build one of my grids in it... =[

@abass

This comment has been minimized.

Show comment
Hide comment
@abass

abass Apr 7, 2015

+1

If anyone can get achieve this then it'd be absolutely killer for the advancement of flexbox grid systems!

abass commented Apr 7, 2015

+1

If anyone can get achieve this then it'd be absolutely killer for the advancement of flexbox grid systems!

@philipwalton

This comment has been minimized.

Show comment
Hide comment
@philipwalton

philipwalton Apr 8, 2015

Owner

Weird. I don't know how I missed this not working in IE10, but it looks like you're right.

An easy workaround, though, assuming you know whether you're in a row or column flex container, is to use flex-basis: auto and then set your calc property on the width, for example:

flex: 0 0 auto;
width: calc(100%/3);

This works for me in IE10.

Owner

philipwalton commented Apr 8, 2015

Weird. I don't know how I missed this not working in IE10, but it looks like you're right.

An easy workaround, though, assuming you know whether you're in a row or column flex container, is to use flex-basis: auto and then set your calc property on the width, for example:

flex: 0 0 auto;
width: calc(100%/3);

This works for me in IE10.

@corysimmons

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Apr 8, 2015

But if you're using width what's the point of using Flexbox?

corysimmons commented Apr 8, 2015

But if you're using width what's the point of using Flexbox?

@abass

This comment has been minimized.

Show comment
Hide comment
@abass

abass Apr 8, 2015

I definitely agree with you @corysimmons though I guess, isn't the main point of flexbox that it eliminates the need for floats/clearfixes? It does seem really stupid that the only fix for IE10 is to set a width though. Sounds really counter-productive.

abass commented Apr 8, 2015

I definitely agree with you @corysimmons though I guess, isn't the main point of flexbox that it eliminates the need for floats/clearfixes? It does seem really stupid that the only fix for IE10 is to set a width though. Sounds really counter-productive.

@corysimmons

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Apr 8, 2015

I'm not convinced getting rid of clearfixes/floats is a good enough reason to drop browser support for IE8-9.

I'd like to add that I would love for the polyfill to be fixed to take this into consideration. I'd make a pretty neat Flexbox grid system if that were the case.

corysimmons commented Apr 8, 2015

I'm not convinced getting rid of clearfixes/floats is a good enough reason to drop browser support for IE8-9.

I'd like to add that I would love for the polyfill to be fixed to take this into consideration. I'd make a pretty neat Flexbox grid system if that were the case.

@abass

This comment has been minimized.

Show comment
Hide comment
@abass

abass Apr 8, 2015

Very true, which maybe that just means flexbox truly isn't ready yet then? Once IE8 and IE9 finally vanish (IE8 is getting there, even though in theory it's already on EOL, but some XP users are still using it of course). Then maybe that's when flexbox finally makes some sense and it's worth getting rid of floats at that point?

abass commented Apr 8, 2015

Very true, which maybe that just means flexbox truly isn't ready yet then? Once IE8 and IE9 finally vanish (IE8 is getting there, even though in theory it's already on EOL, but some XP users are still using it of course). Then maybe that's when flexbox finally makes some sense and it's worth getting rid of floats at that point?

@philipwalton

This comment has been minimized.

Show comment
Hide comment
@philipwalton

philipwalton Apr 8, 2015

Owner

But if you're using width what's the point of using Flexbox?

Tons of reasons: equal height flex items, vertical centering, proper baseline alignment, the flex properties (they still work even with a definite flex-basis), and many more.

Owner

philipwalton commented Apr 8, 2015

But if you're using width what's the point of using Flexbox?

Tons of reasons: equal height flex items, vertical centering, proper baseline alignment, the flex properties (they still work even with a definite flex-basis), and many more.

@corysimmons

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Apr 8, 2015

@philipwalton Fair enough. I'll tinker around with this tonight and see if it solves any of my problems.

corysimmons commented Apr 8, 2015

@philipwalton Fair enough. I'll tinker around with this tonight and see if it solves any of my problems.

@corysimmons

This comment has been minimized.

Show comment
Hide comment

corysimmons commented Apr 8, 2015

@philipwalton

This comment has been minimized.

Show comment
Hide comment
@philipwalton

philipwalton Apr 12, 2015

Owner

Closed via 1e0e0f5.

Owner

philipwalton commented Apr 12, 2015

Closed via 1e0e0f5.

kylenathan added a commit to Lion/comxo-client that referenced this issue Aug 16, 2018

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