Javascript CSS/HTML:无法在Safari中隐藏元素

我正在尝试在网页上实现模式覆盖

这样做的目的是在用户单击某个特定按钮之前隐藏覆盖。这在铬和FF中工作良好。但是，在Safari中，当覆盖层被隐藏时，覆盖层中的#特征始终可见

为什么会这样？降低可见性：显式隐藏到#功能中不起任何作用

任何帮助都将不胜感激

我有这个：

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

---

尝试

显示：无或<代码>不透明度：0

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