Foundation-sites: [Foundation for Sites] 1023px IE Breakpoint Bug

[dvolz]

How can we reproduce this bug?

1. Open IE 10 or 11 or Edge
2. Use foundation visibility classes
3. At 1023px wide you will see both .hide-for-large and .show-for-large classes.

What did you expect to happen?
Only one or the other to show up.

What happened instead?
Both showed up.

Test case:
http://codepen.io/penia/pen/yOdyeP

[shishircoolin]

Hi @dvolz,
This happens as IE rounds off to to 2 decimal places. So for @media screen and (min-width: 64em)(1024px), IE calculates it rightly to 1024px and for @media screen and (max-width: 63.9375em)(1023px), IE truncates it to 2 decimal places only considering max-width: 63.93em(1022.88px). So when you are at 1023px there is no style applied on IE Browser. You can find more info over here: http://cruft.io/posts/percentage-calculations-in-ie/

One solution I feel to avoid this is, convert all the rem values to px in you css itself. But as of now while customising you do not have an option to do that. So you need to manually update all of the values by yourself.

Here's an example using px value: http://codepen.io/shishircoolin/pen/pyXEKL try this in IE @1023px

[dvolz]

Thanks for the explanation @shishircoolin - that was super helpful. Hopefully they come up with a fix for this.

[andycochran]

Ooh. This one's a real catch-22. Hmm… 

[blindside85]

So, after digging into this a bit and doing some preliminary testing, I made this pen to test a fix. @shishircoolin gave me the idea... if IE is truncating the decimal rather than rounding it... why not round it myself?

So I changed the breakpoint values to 39.94em and 63.94em, and am no longer able to reproduce the issue.

Can anyone else confirm this? If it works, I can submit a PR, unless I somehow missed a critical use case. I tested the pen in current versions of Chrome, Firefox, and Safari on OSX 10.11.5, and several versions of IE10 and Edge via Virtualbox.

[andycochran]

Good thinking, @blindside85! We could add a function to _unit.scss that rounds the $value to hundredths. Maybe something like this?

@zurb/yetinauts, thoughts?

[shishircoolin]

@blindside85 this could be more of a hack than a solution as it means writing more media queries inorder to fix it. But yes we could use them for now.
@andycochran : it seems like a possible solution. Maybe we can suggest this.

[andycochran]

Hmm… Rounding might give us trouble with sub-pixel values.

[andycochran]

@brettsmason @ncoden Do either of you have thoughts on this one?

[andycochran]

Seems like the only way to fix this is to exclusively use min-width and never use max-width. I'm not sure that's an option.

[ncoden]

@andersonaguiar I agree with the round function. I don't see cases where it would create a bug for others browsers.

[soylent]

Looks like this issue has been resolved in v6.5.0+

[DanielRuf]

Closing because of

Looks like this issue has been resolved in v6.5.0+