IE9 HTML5 Canvas iFrame Issue


  • I have a web page that on the IE9 browser renders in compatibility view mode of IE8. This page contains an iFrame that points to a child page.

    This child page has the doctype: 

    <!DOCTYPE html>

    And the following meta tags:

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />


    Yet, this child page continues to display in compatibility mode of IE8.


    Is there any way to get the child page to have a document mode of IE9 standards? I’ve searched and found different points of view where one says the iFrame inherits and there is nothing that can be done and another point of view saying the opposite and that the settings I have should cause the page to render in IE9 standards.


    Additionally, I’ve unchecked the “Automatically recover from page layout errors with Compatibility View” and the domain is not listed under the Compatibility View Settings.


    Thank you for any help or insight you can provide.

    Thursday, June 30, 2011 3:19 AM

All replies

  • Please provide a link to "I have a web page that on the IE9 browser renders in compatibility view mode of IE8."
    It must be using a x-ua meta or response header to render in IE9 in IE8's "Standards" mode.

    see also

    Thursday, June 30, 2011 4:50 AM
  • Hi Rob -

    Thanks for your help.

    Here is a link to a bare bones example of my iFrame Parent/Child setup with the document mode issue:

    And actually the following link is a better example that more closely matches the environment that I’m working in – having both framesets and nested iframes.

    But in any case, either examples show the problem of the child inheriting the parent’s document mode.

    From the link that you provided, I stumbled across a document mode flow chart that indicates that my child page should be in IE9 Standards. But I don’t see why the examples I have do not perform as outlined.

    BTW - For the "X-UA-Compatible" meta tag on the child page, I've tried IE=9, IE=EmulateIE9, & IE=edge -- and no difference -always comes in with document mode of IE8 Standards.

    Hopefully you see something I’m missing.





    Thursday, June 30, 2011 9:27 AM
  • Hi,

    Remove the IE8 x-ua meta from your parent document....

    <meta content=IE=8 http-equiv=X-UA-Compatible>

    to allow the parent document to render using IE9 Standards Mode....THEN the child document (which is using the system DTD <!doctype html>) will render in IE9 Standards....IE9 forces child documents in iframes to use the DOCUMENT MODE (document.documentMode) of its parent document, regardless of ITS DTD....

    see my exaple of Blob Salad....

    Friday, July 01, 2011 4:21 AM
  • If I could remove the meta tag, I would, but I can't since in production there are hundreds of pages that would be broken. The links I previously provided are only an example.

    It appears that frames/iframes in IE9 can only inherit the parent document mode and the only work around is to open a new tab or window with the child page not in a frame. The flow chart I mentioned in my previous post indicates that in one of the steps that the iframe’s document mode can't be in IE9 Standards if the parent isn't in IE9 Standards but then says that in this case the iframe page follows other steps which then later on indicate that it could display in IE9 Standards. This gave me false hope. Whoever created that flow chart needs to redo it so it isn't ambiguous on iframes.

    So for what I’m trying to do (use the HTML5’s canvas) and just for IE, I have to open a new tab or window since the site I’m working on has in its parent frameset page the X-UA-Compatible meta tag forcing the entire site to an older document mode.

    • Marked as answer by Coffe Friday, July 01, 2011 3:37 PM
    • Unmarked as answer by Coffe Friday, July 01, 2011 3:40 PM
    Friday, July 01, 2011 3:33 PM