Modal不会在Safari中垂直扩展

Question

我有一个简单的模式，除了Safari 10.1.2之外，在所有经过测试的桌面浏览器中都很有效（未知其他版本的Safari会受到影响）

您可以在此处看到它： https ： //jsfiddle.net/dectgL0u/4/

在大多数浏览器中， .modal div的内容可以按预期显示。 但是，在Safari中， .modal div没有高度。

如果我删除overflow-y ，问题就消失了，但是当模态是浏览器窗口的100％时我需要滚动它。 我也不想提供固定的高度。 它应该增长到填充内容高达100％。

<div class="mask">
  <div class="wrapper">
    <div class="modal">
     This isn't visible without scrolling in Safari 10.1.2
    </div>
  </div>
</div>

.mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
}
.modal {
  border: 1px solid red;
  max-height: 100%;
  overflow-y: auto;
  background: white;
}
.wrapper {
  display: table-cell;
  vertical-align: middle;
}