Grid broken in IE 10+

[benschwarz]

Tested in IE11 - (VM available from modern.ie)

.

Removing the padding from the column/offset classes corrects the grid, but clearly the padding is required for the gutters.

[benschwarz]

Suspect what we have here is a rounding issue.

[kristoferjoseph]

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

[kristoferjoseph]

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

[benschwarz]

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

[kristoferjoseph]

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

[kristoferjoseph]

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.

[benschwarz]

Oh. Rad!

[skdenmark]

Is the IE problem fixed?

[kristoferjoseph]

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

[kristoferjoseph]

[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 👎

[bostondv]

@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%;
}

[kristoferjoseph]

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 notifications@github.com
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