javascript - Visibility attribute stopped working in chrome for me - Stack Overflow

admin管理员组

文章数量:1344213

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;
}

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;
}

• javascript
• html
• css
• iframe

Share Improve this question Follow edited Oct 7, 2012 at 9:15 Vince Lowe asked Oct 7, 2012 at 8:12 Vince LoweVince Lowe 3,63077 gold badges3939 silver badges6363 bronze badges 3

• Could you please provide a jsfiddle. There must be something else going on… – Miha Rekar Commented Oct 7, 2012 at 8:17
• Having the same issue. Can you find a bug entry on Chromium? EDIT: found this entry: code.google./p/chromium/issues/detail?id=301376 Can you confirm the bug only occurs on pages that embed flash content? – Gyum Fox Commented Oct 30, 2013 at 9:45
• @Gyum Fox My page did embed flash yes – Vince Lowe Commented Nov 8, 2013 at 20:24

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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.

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>

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";
}`

In my case I will just use JS onload to hide the element and I will be able to use JS to toggle visibility="visible"

window.onload = function() {
  document.getElementById("newDiv").style.visibility = "hidden";
}
function showHidden() {
  document.getElementById("newDiv").style.visibility = "visible";
}

本文标签： javascriptVisibility attribute stopped working in chrome for meStack Overflow