Visibility attribute stopped working in chrome for me

Question

I created a web app some months ago and tested it working fine in ie, ff & chrome.

i went to add something last night and noticed that my hide iframe function is no longer working in chrome.

If i inspect the element i can see the attribute is indeed changing, but the iframe is not hidden.

function hideIFrame(){
    document.getElementById("myFrame").style.visibility="hidden";
    self.focus();
}

function showIFrame(){
    document.getElementById("myFrame").style.visibility="visible";
}

the myFrame div starts off hidden. and is made visible successfully but when the visibility is changed to hidden chrome is not hiding it, ff and ie do hide it still.

any idea why?

The FIX:

function hideIFrame(){
    document.getElementById("myFrame").style.visibility="hidden";
    document.getElementById("myFrame").style.opacity=0;
    self.focus();
}

function showIFrame(){
    document.getElementById("myFrame").style.visibility="visible";
    document.getElementById("myFrame").style.opacity=1;
}

Answer 1

There are problems with iframe visibility toggling ($('iframe').css('visibility','hidden') not working in google chrome). If you want it to disappear, use height, width:0. If you want it to simply be invisible, use opacity:0.

Answer 2

I didn't get your problem. May be you should post some more codes where you are calling the function. Here is a sample code works well in chrome.

<script type="text/javascript">
function hideIFrame(){
document.getElementById("myFrame").style.visibility="hidden";
self.focus();
}

function showIFrame(){
document.getElementById("myFrame").style.visibility="visible";
}
</script>

<input type="button" onclick="hideIFrame()" value="hide"/>
<input type="button" onclick="showIFrame()" value="show"/>

<iframe id="myFrame">

</iframe>

Answer 3

use display.none instead

    function hideIFrame(){ 
document.getElementById("myFrame").style.display="none";
    self.focus();
}

function showIFrame(){
    document.getElementById("myFrame").style.display="inline";
   //or document.getElementById("myFrame").style.display="block";
}`