iframe not rendering in ie9 mode when containing page is in quirks mode

Question

I have an iframe in a page that runs in quirks mode (I don't have control over the containing page), and I need my page to render in a mode that is compatible with modern browser features.

The contained page makes heavy use of newer JavaScript features (especially the nice array functions), and SVG rendering. While I can shim the array functions easily enough, I can't force the svg to render.

To be clear, the inner page is NOT running in quirks mode - I have specified a doctype and the ie=edge < meta > tag. It looks like it's using the ie8 rendering mode (hard to be certain)

A sample of the issue is here: http://stevesspace.com/quirks/quirks.html - load it up in chrome to see the expected output, and check it in IE9 or 10 for the actual output.

EDIT: I've added the document mode and compatibility mode to the sample, I can confirm it's using IE8 doc mode.

Latinist

possible duplicate of Will an iframe render in quirks mode? – Deadening

Apparently the doc type is inherited since IE9. And your test is correct: the page turns red inside the IFrame, but not when you open it outside the IFrame (IE) or at all in Chrome. Now how to solve it... I don't know. :-/ Good question with nice evidence, though. – Deadening

Here's a tip on how to at least fix any CSS problems due to this issue. Doesn't fixs the quirks-mode, though. css-tricks.com/ie-iframe-quirksmode – Deadening

@Deadening I had a good look at that question - my problem is actually the inverse of it though. The iframe isn't running in quirks mode - it's running in IE8 mode. The doctype/meta tag is supposed to fix that, but doesn't. I'm fine with having to shim all the JS features I can, but the SVG support is quite critical, and that can't be shimmed. – Latinist

Maybe you can use a library like this code.google.com/p/svgweb (flash) or this code.google.com/p/svg2vml (svg->vml) to render the graphics in a different way in such cases. It starts getting icky, but I wouldn't know what else. I can find the problem (and the 'reverse problem') in many places, but nothing that leads to a solution. – Deadening

Just for Sh*ts and giggles, have you tried putting the document in an Iframe in another iframe (nested) inside the quirks document? Wouldn't know why that would work, but I've been surprised by workarounds like that more than once. ;) – Deadening

Yeah, no luck there - I believe the problem is IE only supports 1 rendering mode per tab, so nesting does nothing. I'm looking into the <object> tag now, it's looking pretty hopeful actually – Latinist

Allright! If that turns out to be a solution, please post it as an answer to this question, so there's finally a work-around for this issue. :) – Deadening

Answer 1

I ended up using an object tag instead of an iframe, it seems to work ok across modern browsers.

<object type="text/html" data="http://example.com"></object>

It turns out you can't modify the URL using javascript in IE9, but that's not a big deal - removing/adding a new object element works just as well for this.

Update: This tag can also be in an intermediate page that the iframe points to and it all works fine Update 2: This solution does not work in IE10

Latinist

Can you expand? Works fine for me. – Latinist

In IE10, what happens with the <object> solution? The iframe solution in IE10 seems to render the parent as Quirks and the inner as IE10 Standard mode, which is what you wanted, I think. – Chemosh

Sorry for slow reply. I didn't get this behaviour - see stevesspace.com/test/quirks/… . Note IE10 switched browser mode if the parent page is Quirks, but not if it's IE8... – Latinist

Using the OBJECT instead of IFRAME solved my rendering mode issue. But the OBJECT tag does dot have a contentWindow field while the IFRAME tag does. Thus, I can't use the postMessage API – Charade

after hours of trying to render the main page as IE8 (to keep old js code) and a iframe as IE9 (to show a svg) i found this object tag here. this worked great for my needs, while iframe sucked hard in IE. – Bursiform