IE10/Safari Cannot Hide an Object/Flash inside of iFrame

css, flash, iframe, internet-explorer-10, javascript

Solution

Apparently the best solution will be move it off the screen:

.xhide
{
    display: block;
    position: absolute;
    left:-9999px;
}

We can add this class on click to hide it, something like:

document.getElementById('swfDiv').className = "xhide";

Problem

I have a Flash Animation inside of iFrame. And when I try to hide it, IE10 keep it displayed and overlapping other content. ``` <body style="background-color: #EEE"> Testing IE10 <div id="swfDiv"> <iframe src="swf.html" width="500" height="50"></iframe> <br /> <button onclick="document.getElementById('swfDiv').style.display='none'">Hide</button> </div> <div style="background-color: #DDD"> This try to hide the animation, but it is not working on IE10. <br/> It works fine in others browsers and earlier versions of IE. </div> </body> ``` Update 02/08/2013 I found the same problem in Safari (5.1.7)

Original source