5

EDIT

As @Joe pointed out in his answer, the problem here with IE has nothing to do with media queries.

I have therefore updated the old title: ("media queries GLITCH in IE") with the current one. (thanks also to some meta advice)

Just to be sure, I created a new FIDDLE containing just the calc function, and low and behold - I see the same (bad) behavior in IE as I did in my original fiddle with the media queries.

Also, one interesting observation which I noticed was that this only happens when I use division in the calc operation, but if I use something simpler like calc(100% - x px) - IE handles it ok.


I am using media queries to justify a list of boxes.

Basically, I set up a media query for each #columns states, where I then use calc() to work out the margin-right on each of the elements (except the ones in the last column).

Here's the fiddle

Now this is working fine in chrome and firefox - but when I run this in IE9+

I see a glitch between media query states (including flickering and disobeying the media queries).

Here is a screenshot of what i'm talking about

[screenshot taken at browser window width of 710px] :

enter image description here

Is this an IE bug or have I done something wrong?

1 Answer 1

9
+100

FIX:

here is a smoothly working jsfiddle of my solution

further investigating the math i had a hunch internet explorer is having trouble trying to do something stupid ( what else is new ), and that was to allow decimal values ie margin-left:250.123px; thus causing VERY miniscule inconsistencies and ruining your layout.

to correct this issue i temporarily subtracted 1px from all of your calculations and everything is looking smooth as can be

@media (max-width: 350px) {
  .container > div {
    margin-left: calc(((100% - 150px)/2) - 1px);
    margin-right: calc(((100% - 150px)/2) - 1px);
    background:black;
  }
}

@media (min-width: 350px) and (max-width: 550px) {
  .container > div {
    margin-right: calc((100% - 300px) - 1px);
    background:red;
  }
  .container > div:nth-child(2n) {
    margin-right: 0;
  }
}
@media (min-width: 550px) and (max-width: 750px)  {
  .container > div {
     margin-right: calc(((100% - 450px) / 2) - 1px);
    background:purple;
  }
  .container > div:nth-child(3n) {
    margin-right: 0;
  }
}

@media (min-width: 750px){
  .container > div {
    margin-right: calc(((100% - 600px) / 3) - 1px);
  }
  .container > div:nth-child(4n) {
    margin-right: 0;
  }
}

EDIT:

ive added colors to the media queries to help troubleshoot the source of the problem and have ruled them out as the issue. ive also ruled out compatibility mode as the cause of this issue and your calc formatting looks just fine.

take a look at the updated fiddle

were the media queries breaking we would see inconsistencies in the color flickering as well... this leads me to beleive it is a mathematical calculation error specific to our margin / spacing definitions... further investigating coming soon


i have encountered a few issues with media queries in ie... a few bugs worth mentioning are

compatibility mode - make sure this is turned off can cause unexpected behavior or just break media queries all together

doctype - not declaring one or not having an html5 doctype can be the cause of even more media query inconsistencies

<!DOCTYPE html>

ive noticed you are using calc() my first reaction was to make sure all mathematical operators are surrounded by white space... this is another issues ive encountered, where

calc(2px+5px)

has the tendency to fail where the proper syntax should be

calc(2px + 5px)
6
  • 1
    ive been looking for a slightly cleaner solution - this has been fully working for me but i would prefer some sort of truncate or round down method.
    – Joe
    May 23, 2013 at 16:27
  • +1 Thanks. So it looks like the problem has nothing to do with media queries but rather with how IE renders sub-pixels - like explained here... right?
    – Danield
    May 23, 2013 at 20:49
  • yes, that is precisely what i was thinking - good article btw
    – Joe
    May 23, 2013 at 20:54
  • Thanks, your solution of subtracting the 1px works for me. I edited the original question based on your findings to show that the problem lies within the calc function - and with division operations in particular. I'm a bit surprised that I can't find any documentation concerning this IE bug.
    – Danield
    May 27, 2013 at 6:12
  • 1
    Still experienced this two years later. The 1px solution worked for me. Thanks. Jul 24, 2016 at 21:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.