为什么我的弹出窗口在Safari中有效？

Question

我使用CSS创建了一个弹出窗口。它在Google Chrome中运行良好;但是，它没有按预期在Safari中显示。上面的照片在Safari中，底部的照片是镀铬的。

以下代码是我用来创建弹出窗口的代码：

.modal-container {
  position: fixed;
  background-color: #fff;
  left: 50%;
  width: 80%;
  height: 620px;
  max-width: 900px;
  padding: 20px;
  border-radius: 5px;

  -webkit-transform: translate(-50%, -200%);
  -ms-transform: translate(-50%, -200%);
  transform: translate(-50%, -200%);

  -webkit-transition: transform 500ms ease-out;
  transition: transform 500ms ease-out;
}
.modal:before {
  content: "";
  position: fixed;
  display: none;

  background-color: rgba(0,0,0,.8);
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; 
}

以下代码就是我用来创建标题的代码

.box {
  position: fixed;
  top:0px;
  left: 0;
  width: 100%;
  padding-top: 20px;
  background-color: #fff;
  overflow: hidden;
  display: block;
  z-index: 900;
}

有没有人解释为什么在Chrome中一切看起来都不错，但在safari中没有？ 谢谢