iOS html 和溢出滚动的潜在错误

Question

我浏览了各种论坛和网站，但无济于事，我的网站在 iOS 上出现了一个奇怪的错误（但在 chrome 上 iOS 所以我不确定它是 iOS 设备独有的还是我的网站是错误的）。本质上，我有一个名为“startModal”的模式，当用户单击按钮开始游戏时，它会出现在用户面前，然后他们可以 select 哪个类别。页面的机制按预期工作，但样式不尽如人意。

在这个 <div> 中，我有一长串类别可供选择，超过 <div> 的高度，我设置了 overflow 属性 <div> 滚动 (overflow: scroll;) 并且它一直按预期工作，直到今天早上滚动停止工作。然而，在试验之后，我发现只需将我的 iPad 从横向旋转到纵向再旋转回横向或反之即可解决问题，并且 <div> 滚动，我认为这是一个问题页面呈现，但我不太确定。我在下面附上了 CSS 属性。

startModal

.startModal {
  z-index: 20;
  position: fixed;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 10px;
  font-family: Helvetica;
  color: Black;
  padding: 20px;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  height: 450px;
  overflow: scroll;
  width: 30vw;
  visibility: hidden;
}

每个选择元素

.choice {
  left: 5%;
  width: 24vw;
  height: 25px;
  position: absolute;
  z-index: 100;
  border-radius: 10px;
  font-family: Helvetica;
  color: white;
  padding: 20px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

我的 startModal 遵循这个模板：

<div id="startModal" class="startModal">
  <div class="choice" style="top:10px;background-color:red">Option 1</div>
  <div class=" choice" style="top:20px;background-color:green">Option 2</div>
  <div class=" choice" style="top:30px;background-color:blue">Option 3</div>
</div>

我知道上面模板的样式与属性的样式不匹配，但这只是为了展示。

我不确定是什么导致了这个问题，但我非常乐意提供更多信息。提前致谢。乔什

Answer 1

我解决了这个问题，我认为这是使用 visibility 属性隐藏和显示我的模式时出现的渲染问题。我已经将其更改为 display:none; 和 display:inline-block;，它完美地解决了这个问题。

iOS html 和溢出滚动的潜在错误

Potential bug with iOS html and overflow scrolling

html

css

safari

ios