Skip to content
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
Closed

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

corysimmons opened this issue Apr 4, 2015 · 15 comments

Comments

@gregwhitworth
Copy link
Collaborator

@gregwhitworth 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
Copy link
Collaborator

@gregwhitworth gregwhitworth commented Apr 4, 2015

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

@corysimmons
Copy link
Author

@corysimmons 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
Copy link

@mestaritonttu mestaritonttu commented Apr 5, 2015

win8_ie_10 0
Screenshot from Browserstack IE10.

IE11 works ok, checked locally in Win 7.

@corysimmons
Copy link
Author

@corysimmons 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
Copy link

@abass 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
Copy link
Owner

@philipwalton 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
Copy link
Author

@corysimmons corysimmons commented Apr 8, 2015

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

@abass
Copy link

@abass 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
Copy link
Author

@corysimmons 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
Copy link

@abass 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
Copy link
Owner

@philipwalton 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
Copy link
Author

@corysimmons 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
Copy link
Author

@corysimmons corysimmons commented Apr 8, 2015

@philipwalton
Copy link
Owner

@philipwalton philipwalton commented Apr 12, 2015

Closed via 1e0e0f5.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.