Iframe hiding/loading makes it invisible in IE6 (yui library)

I don't know if this is just IE IFrame bug or it is something related to yui, I think that it happens when you load something into IE6 iframe while it is invisible (it needs to be hidden) - the content becomes invisible, even though it takes space.

Here is the example To see the problem just load the page in IE6, click "New Tab" button and quickly switch back to first tab. Wait a bit for the site to load. If you inspect the page, you will see that the content loaded but it is invisible. You can substitute the website name to any slow-loading website (so you can switch before it finishes loading).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>


<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/tabview/assets/skins/sam/tabview.css" /> 

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"&gt;&lt;/script&gt; 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"&gt;&lt;/script&gt; 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/tabview/tabview-min.js"&gt;&lt;/script&gt; 


<script type="text/javascript">

var tabView;

YAHOO.util.Event.onContentReady("yahoo-com", function () {

    tabView = new YAHOO.widget.TabView("about");

});

function openNewTab(url, name){
    var newTab = new YAHOO.widget.Tab({
     label: name,
     content: '<iframe src="' + url + '"/>',
     active: true
    });

    tabView.addTab(newTab);
}

</script>

</head>

<body class="yui-skin-sam" id="yahoo-com">

<button type="button" onclick="openNewTab('http://www.slowfoodusa.org', 'Slow Loading Tab');" >New Tab</button>

 <div id="about" class="yui-navset">
    <ul class="yui-nav">
        <li class="selected"><a href="#tab1"><em>Dictionary</em></a></li>
    </ul>            
    <div class="yui-content" id="content">
        <div id="tab1">
     <iframe src="http://apple.com" frameborder="0"></iframe>
    </div>
    </div>
</div>

</body>
</html>

ansaurus

tags:

views:

answers:

Iframe hiding/loading makes it invisible in IE6 (yui library)

related questions