CSS/HTML：無法隱藏Safari中的元素

Question

我正試圖在網頁上實現模式覆蓋。

意圖是在用戶點擊某個特定區域之前隱藏疊加層。這在Chrome和FF中可以正常工作。但是，在Safari中隱藏疊加層時，其中的#feature始終可見。

這是爲什麼？丟棄可見性：明確隱藏到#feature中什麼也不做。

任何幫助，將不勝感激！

我有這樣的：

<div id="overlay"> 
    <div id="overlay-background" onclick="overlay()"></div> 
    <div id="feature-wrapper"> 
     <iframe id="feature" src="https://player.vimeo.com/video/74891452?color=ffffff&title=0&byline=0&portrait=0" width="750" height="422" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>  
    <div id="description"></div> 
    <div id="close" onclick="overlay()"><p>close</p></a> 
    </div> 
</div> 

<script> 
    function overlay() { 
    document.body.style.overflow = (document.body.style.overflow == "hidden") ? "auto" : "hidden"; 
    el = document.getElementById("overlay"); 
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible"; 
    } 
</script> 

有了：

#overlay { 
    visibility: hidden; 
} 

#overlay-background { 
    width: 100%; 
    height: 100%; 
    z-index: 100; 
    top: 0px; 
    position: fixed; 
    background-color: #000; 
    opacity: 0.9; 
} 

#feature-wrapper { 
    opacity: 1.0; 
    z-index: 100; 
    position: fixed; 
    top: 10%; 
    width: 100%; 
    height: 200%; 
    left: 50%; 
    -ms-transform: translate(-50%,0); /* IE 9 */ 
    -webkit-transform: translate(-50%,0); /* Safari */ 
    transform: translate(-50%,0); 
    text-align: center; 
} 

#feature { 
    z-index: 999; 
    max-width: 90vw; 
    max-height: 50vh; 
    border-style: solid; 
    border-color: #fff; 
    border-width: 20px; 
    margin: 2em auto; 
    visibility: hidden; 
} 

Answer 1

嘗試display: none;或opacity: 0;