Dialog Issue: Iframes break in IE9

Dialog Issue: Iframes break in IE9

We ran into a problem with IE9 and IFrames, using Dialog that others are bound to run into.  If you have an IFrame inside a Dialog's content, and IE9 is in standards mode, it will break.

This is because Dialog moves its content from wherever its rendered in the DOM, to a first-child of the Body tag.  This is (nicely) done to avoid z-index stacking order issues that can occur with IE9 (quirks mode), and below.  IE8 and IE9 (in standards mode), however, do not have the z-index stacking bug.

The problem is that IE9 in standards mode  eliminates "built-in APIs, including JavaScript and DOM APIs" if an Iframe is moved after it's been parsed.  They do this to combat a potential memory leak.

Since Dialog always moves its content, this essentially means if you want to guarantee cross-browser support, you cannot safely have IFrames inside Dialog content.

The solution I propose is as follows - only move UI components within the DOM if necessary.  

This would mean something like this...

(1) Add "SafeZIndexStacking" to jQuery feature detection ( jQuery.support.safeZindexStacking)
(2) If the rendering browser supports proper z-Index stacking, don't move the content
(3) If the rendering browser does NOT support proper z-Index stacking, move the content
(4) Also allow the initializer to accept a selector specifying where the widget should be placed (this would be nice to get it inside the <form> tag for .NET webforms support).

I'd welcome other suggestions/ideas too.

Below is a sample of what IE does. Add this to a document that you can view in IE9 standards mode:
<div id="before">
                <iframe id="iframe" src="http://www.microsoft.com"></iframe>
            <div id="after"></div>
            <script type="text/javascript">
                //uncomment code below in IE9 standards mode to see error

    • Topic Participants

    • ted