Media queries fail inside IE9 iframe

Asked 25/4, 2012 at 13:2 Answered 12/12, 2014 at 18:32

html css media-queries responsive-design

I have the following media queries in my CSS:

@media screen and (min-width: 0px) and (max-width: 319px) {
    body {background-color:red;}
}

@media screen and (min-width: 320px) and (max-width: 480px) {
    body {background-color:orange;}
}

@media screen and (min-width: 481px) and (max-width: 980px) {
    body {background-color:yellow;}
}

@media screen and (min-width: 981px) and (max-width: 1200px) {
    body {background-color:green;}
}

@media screen and (min-width: 1201px) {
    body {background-color:blue;}
}

and five iframes at corresponding sizes:

<iframe frameBorder="0" src="index.html" height="320" width="255" ></iframe>

The queries kick-in fine in the standalone html file, but when viewed in an iframe context, they fail in IE9. All other browsers display OK.

Anyone know why? thanks

[edit] For the record, the parent and child html have the same docType, and the CSS is being served as text/css.

Mender answered 25/4, 2012 at 13:2 Comment(2)

Are you writing these media queries in non external stylesheets? I've been working on projects with content loaded in iframes for months now and media queries worked exactly as expected, however, recently I've made an addition in which I've placed my CSS in the <style> tags of the html file to be displayed in the iframe, as opposed to an external sheet linked to on the page with the iframe, and IE9 is rendering all of the CSS, even when inside a query that should be ignored, on load, then rerendering correctly if I scale my browser some. – Bael 6/5, 2013 at 14:23

Vimeo brought me here – Hecklau 26/4, 2019 at 15:42

Not a real answer but could help somebody else find a work around for this bug in IE.

Page containing iframes

<link href="style.css" rel="stylesheet">

Iframe pages

<link href="style.css?frameX" rel="stylesheet">

The param frameX prevents IE from caching the css page and thus the iframe has responsive layout independently from the other pages. This is just a hack(horrible one) and to help somebody else find the answer to this problem.

Sample files

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet">
</head>
<body>
  <p></p>

  <hr>
  250px frame
  <iframe frameBorder="0" src="frame1.html" height="100" width="250" id='frame_1'></iframe>  

  <hr>
  350px frame
  <iframe frameBorder="0" src="frame2.html" height="100" width="350" id='frame_2'></iframe>  

  <hr>
  390px frame
  <iframe frameBorder="0" src="frame3.html" height="100" width="390" id='frame_3'></iframe>  

</div>
</body>

frame1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css?page=frame1" rel="stylesheet">
</head>
<body>
  <p></p>
</body>
</html>

frame2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css?page=frame2" rel="stylesheet">
</head>
<body>
  <p></p>
</body>
</html>

frame3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css?page=frame3" rel="stylesheet">
</head>
<body>
  <p></p>
</body>
</html>

style.css

iframe{display:block;}

@media (max-width: 8000px)
{
  body p:before {content: "bigger than 550px";}
}

@media (max-width: 550px)
{
  body p:before {content: "max550";}
}

@media (max-width: 450px)
{
  body p:before {content: "max450";}
}

@media (max-width: 350px)
{
  body p:before {content: "max350";}
}


@media (max-width: 250px)
{
  body p:before {content: "max250";}
}

Fumigator answered 5/6, 2012 at 15:29 Comment(1)

You are my hero. This was happening to me and it made no sense. Thank you! – Incertitude 26/9, 2014 at 12:29

Here's what I did:

using jQuery...
get all iframes on the page
onload of each iframe find all the stylesheet links
for each stylesheet grab the url and append a random num 'nocache' querystring to it
create a new stylesheet link tag and append it to the head
done.

Here's the code:

// This forces the media queries to run in IE iframes, by waiting for the iframes to load and then,
// re-getting/applying the stylesheet
(function($){
    // Get each of the iframes on this page
    $('iframe').each(function(index){
        // On load of each iframe:
        $(this).on('load', function(){
            var iframeDoc = $(this).contents();

            // For each stylesheet reference found:
            iframeDoc.find('link[rel="stylesheet"]').each(function(){
                // Get the current stylesheet's url and add a 'nocache' random num query string to it
                var cssURL = $(this).attr('href');
                cssURL += (cssURL.indexOf('?') != -1)? '&':'?';
                cssURL += 'nocache=' + (Math.random() + index);

                // Create a new stylesheet link tag and append it to the head
                $("<link/>", {
                    rel: "stylesheet",
                    type: "text/css",
                    href: cssURL
                }).appendTo(iframeDoc.find('head'));
            });

        });
    });
})(jQuery);

Tuchun answered 7/11, 2013 at 17:35 Comment(0)

You most likely aren't going to be able to fix this. Media Queries are based on viewport size and I imagine IE isn't treating the iFrame as a fully fledged viewport in this context.

Your best bet would most likely be to add a bit of JavaScript that detects the size and adds a class to the at the same thresholds you are using for your responsive design. This would also give you backwards compatibility with browsers that don't support media queries.

Senseless answered 25/4, 2012 at 14:54 Comment(1)

I've since discovered it works fine if the styles are in the head of the document as opposed to an external stylesheet, so I'm not sure that's the case in this instance. – Mender 25/4, 2012 at 16:58

Had the same Probleme. However I found an easy fix. Using JS to create the iframes I just appended something like ?nocache=Math.random() to the iframe src. That fixed it for me :)

Zoomorphism answered 23/1, 2013 at 12:4 Comment(1)

Good idea but you have to use inline CSS style otherwise the included CSS file will be cached nonetheless ... – Dewayne 18/9, 2013 at 5:49

I had this problem with IE9. The parent page didn't have a doctype declared.
Adding an html5 doctype (<!DOCTYPE html>) in the parent page solved the problem.

Downtoearth answered 12/12, 2014 at 18:32 Comment(0)

Recommended topics

Hot tags