Grid broken in IE 10+ about flexboxgrid HOT 12 CLOSED

Good catch!
I actually updated the percents to avoid this issue... no idea.
I guess I could throw a calc in there instead? 😕

from flexboxgrid.

Suspect what we have here is a rounding issue.

from flexboxgrid.

Updated to use calc now.
@benschwarz Want to take a look and see if it's still borked? I don't have a machine with IE11 on it .
Wish I new some Microsoft folks to hook me up with one? I would make good use of it. ;)

from flexboxgrid.

Hmm, not looking rad @kristoferjoseph…
FYI, I've been using an IE11 vm from modern.ie

from flexboxgrid.

No, that does not look rad at all. Wonder what gives. Thanks for the tip, will get it from modern.ie

from flexboxgrid.

Figured it out. I need to use the newest version of Autoprefixer to get the correct flex-grow property for IE10+
Will make some PRs.

from flexboxgrid.

Oh. Rad!

from flexboxgrid.

Is the IE problem fixed?

from flexboxgrid.

@skdenmark I have been working on this and have to say it's been a bitch to debug. Can't seem to track down wth IE is barfing on. I feel that I need to split up the flex properties instead of using the shorthand flex property in order to get to the bottom of it. Any help debugging is welcome. :)

from flexboxgrid.

[UPDATE] It seems like box-sizing: border-box is not respected by display: flex elements. The padding is NOT supposed to add to the width of the element, but instead only act on the elements contents. in IE10+ this is not the case. Adding padding to an element causes rounding errors.

Open to suggestions as to how people want this fixed. I could remove the margin and padding that I am using for gutters or I can try and do some voodoo to compensate for the pixel rounding errors for IE only. Obviously the latter is very error prone.

Bummed since I thought we were past box-sizing issues on the web 👎

from flexboxgrid.

@kristoferjoseph I think I found a solution. Add a max-width with a percentage matching the flex-basis value. In my tests on IE 10 & 11, it fixes the box size problem when there is padding on the columns!

For example:

.column-1-hand {
  flex-basis: 8.333333333%;
  max-width: 8.333333333%;
}

from flexboxgrid.

Awesome!
I'll test it out some in my side as well, but this is great news and feels
like a perfect solution!

Thanks

On Monday, August 11, 2014, Boston Dell-Vandenberg [email protected]
wrote:

@kristoferjoseph https://github.com/kristoferjoseph I think I found a
solution. Add a max-width with a percentage matching the flex-basis
value. In my tests on IE 10 & 11, it fixes the box size problem when there
is padding on the columns!

For example:

.column-1-hand {
flex-basis: 8.333333333%;
max-width: 8.333333333%;
}

—
Reply to this email directly or view it on GitHub
#6 (comment)
.

Kristofer

from flexboxgrid.