Internet Explorer and the case of the Very Strange iFrame behaviour

Question

I'm having a truly... bizzare error in none other than Internet Explorer with a windowing system I'm developing. Basically, the windows are absolutely positioned divs containing ah iFrame that shows their page and resizes along with them. In all other browsers this works fine as intended, but in IE the iFrame doesn't show up... properly.

My original code for spawning a new window looks like this:

function spawnNewWindow(url, title, type)
{
    //Does another window with that particular type already exist?
    //If so, just point it at the new link without actually spawning a new window.
    var cancelSpawn = false;
    if ( $('.windowType_'+type).length )
    {
        //Update the SRC attribute for the iframe contained within the window. This should effectively
        //reload the window too.
        $('.windowType_'+type).children("iframe").attr("src", "/darknova4/"+url);
    } else {


    //First, create the window
    $("body").append(
    "<div class='window'> \
    <div class='resizeArea'></div> \
    <div class='titlebar'>"+title+"</div> \
    <div class='closeWindow'></div> \
    <div class='windowContent newspawn'><iframe src='/darknova4/"+url+"' frameborder='0' width='100%' height='100%' scrolling='auto'></iframe></div> \
    </div>");

    //Move this window to the top of the stack
    $(".newspawn").parent(".window").css("z-index", windowZIndex++);

    //Set the data for this window's type, will be used to prevent copy windows being open later
    $(".newspawn").addClass("windowType_"+type);

    //Set up the window for moving and resizing and other stuff
    setupWindows();

    //Finally, remove the "newspawn" flag from the window, since it has content and we don't need work with it anymore.
    $(".newspawn").removeClass("newspawn");

    }
}

On Internet Explorer, this produces a blank white window, which indicates an invisible iFrame since all of my windowed pages have a black background. I suspected the famous (and still not quite fixed) z-index bug, so I made the following change to play with the stacking order and see if I could find a quick-fix:

$("body").append(
"<div class='window'> \
<div class='resizeArea'></div> \
<div class='titlebar'>"+title+"</div> \
<div class='closeWindow'></div> \
<div class='windowContent newspawn'><iframe style='position: relative;' src='/darknova4/"+url+"' frameborder='0' width='100%' height='100%' scrolling='auto'></iframe></div> \
</div>");

Note the relative position, which should be default for objects, but isn't because of the stacking bug. What happens with this code is, the windows shows up, the iFrame shows up, and all looks good, until you try to use it. I can't explain why, but Mousing Over the iFrame causes it to disappear. I have no code on the site tied to the mouse move event, and no code on the iFrame's pages that would cause it to do anything on mouseover. It's really weird. Does anyone have a clue as to why it might be behaving this way?

If you need to see this behavior for yourself, I've already got a test of the system implemented at www.darknovagames.com, which works fine in firefox, but as mentioned is really bizzare in IE. I can post more code if you think it will help, but this is where I think the error is. Namely, I'd be happy to post the CSS on the parent window and the JavaScript for my mouse events, etc.

Thanks to anyone who can provide some insight on this strange behavior.

Answer 1

Try removing position: relative from your HTML element inside the iframe. That seems to take care of the problem in IE8 (and in IE8's Compatibility Mode).

Update: fix for height issue

Adding position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; to the iframe fixes the height problem caused by the above position: relative change in IE7 and IE8.

With both fixes in place, the iframe appears to be working correctly in IE7, IE8, and IE8 emulating IE7 on my machine.