IE9 loads wrong media query info on load with non-external CSS

Question

I have a page which uses non-external CSS in the <style> tags, and in those <style> tags is the following media query:

@media screen and (max-width:768px){
/* CSS */
}

All is working fine in Firefox, the CSS for 768px width and under only renders when it should. However, in IE9, the CSS inside this media query is rendered on load no matter what the size is.

After it loads however, if I change the browser size at all, it rerenders as the desktop version, as it should. So basically, IE9 non-external stylesheet seems to be rendering all CSS, whether it's in a media query for which it doesn't match or not, but then rendering the correct CSS if the browser is resized, even by a pixel.

Does anyone know what exactly is going on with this, or if there's a quick fix? The only solutions I've been able to think of would be working around the issue by reordering my CSS, and adding a new media query, which I'd like to avoid for the ease of updating code.

Billiot

That code should work fine, so there may be something else interfering. Can you post a link for us to look at, or post some test code that demonstrates the issue? – Sedgewinn

@Sedgewinn I'm currently looking for a way to post active code online imitating the issue. Media queries seem to be working fine with IE9 in jsfiddle, but I don't know that jsfiddle compiles the code the same way. It seems to be strictly IE9 with media queries in non-external stylesheets. The browser renders them correctly as soon as I resize it slightly, but innitially it renders all of the CSS inside the <style> tags whether they're inside a media query that should be avoided or not. I can't link to the project itself as it's on a private server. – Billiot

I did a test before posting and the code you supplied worked fine on IE9. – Sedgewinn

Should've mentioned this, I guess this is where posting your code or linking to your site comes in handy, the code I'm refering to is displayed within an iframe. It looks like someone else is having a similar issue. #10316747 – Billiot

Please accept the answer from Jonathan Joosten, it was exactly the right fix for me. I'm amazed this is still a problem in IE11. – Croon

Answer 1

I had a similar problem with an external css file in ie10. I sort of fixed it by giving the query a minimum of 1px (0px doesn't seem to work).

It doesn't solve all my problems, but it may be enough for yours.

@media screen and (min-width: 1px) and (max-width:768px){
/* CSS */
}

Metrify

For some reason IE is running the wrong media query on load, just for an instant, and it causes my links with a transition to quickly flash the wrong color. This fixed it, but I really don't understand why it's needed! Thanks though! – Uncoil

This worked for me too. Because it works, my only conjecture is that IE loads the source file or inline block script, and then never goes back to check the dimensions or thinks it doens't have to (or the viewport dimensions are 0), so it applies whatever is in the CSS; but the min-width additional filter simply applies the correct gusto. Automagical wireups, anyone? :) – Dyanne

Thank you very much! I had the same issue on a website running under IE11. Adding the min-width:1px condition rendered the website correctly (or made sure that the media query was correctly recognized) without having to resize the browser window first. – Gona

This works partially for my case - if the window is larger than 768px then the issue is fixed since it won't load any media queries. However if the window is say 500px, we need the media query to be loaded in this case, which it doesn't, even with the fix in place. – Eringo

Thank you. This approach also solves the opposite problem. If you have a query like @media screen and (min-width: 641px) change it to @media screen and (min-width: 641px) and (max-width: 10000px) and it will solve the problem – Offstage

Answer 2

I came across a similar issue that was happening in IE 10. Setting a min for the media query did not help fix this particular issue. I used a bit of js to resize the window to the exact same size and it fixed the issue that IE was having. It feels a little dirty, but it works.

$(document).ready(function() {
  var w = window.outerWidth;
  var h = window.outerHeight;
  window.resizeTo(w, h);
});

Overstrain

Answer 3

I had similar issue while using external css with media query. solved by loading css after html code.

Vo

Answer 4

You can target IE9 only with this fix:

/* IE9 */
@media all and (min-width:0\0) and (min-resolution:.001dpcm) {
    body {
        background: blue;
    }
}

Apical