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.