iOS Safari的y模态削减

Question

在搜索社区几个小时后，我无法解决我的问题。

我目前正在构建具有多个模态的水平滚动div。当我使overflow-x滚动工作时，它在除iOS Safari之外的所有设备上均可正常运行。 这是我的代码：

标记

<div id="parent">
<div id="scroll">
<div id="card">card content</div>
<div id="card">card content</div>
</div>
</div>

样式

#parent {
overflow-y: hidden;
}

#scroll {
overflow-x: auto;
min-width: 100vw;
-webkit-overflow-scrolling: touch;
}

#card {
width: 222px;
height: 360px;
}

单击卡片时，它会激活一个模态，该模态应该是全宽和全高。在Chrome和firefox上可以正常工作，但在safari移动版上却可以使用。

参考： Screenshot iOS Screenshot Android