Menu
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] :
Is this an IE bug or have I done something wrong?
666
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
