在iPad的Safari

Question

我身上有overflow: hidden的SPA，我有两个工具栏（一个位于top: 0，另一个位于bottom: 0）。

类似的东西：

＆＃13;

＆＃13;

* { margin: 0; border: 0; padding: 0; }

#main {
  width: 100vw;
  height: 100vh;
  background: lightgray;
  overflow: hidden;
}

.bar {
  position: fixed;
  width: 100%;
  height: 60px;
  background: red;
}

#top { top: 0; }
#bottom { bottom: 0; }

＆＃13;

<div id="main">
  <div id="top" class="bar"></div>
  <div id="bottom" class="bar"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

它完成了这项工作。这很容易。 但是，因为最近工具栏上有一些表单元素我发现我的布局受此input element on fixed modal错误的影响。因此，作为一种解决方法（如链接文章中所述），我刚刚将position: fixed更改为position: absolute，用于课程bar。显然它有效。但现在iPad渲染的布局好像不适合100vh，并且有一点烦人的卷轴，即使是overflow: hidden。

截图

• 在position: fixed
的iPad上

• 在position: absolute
的iPad上

有关如何避免/解决此问题的任何想法？ （当然除了使用position: fixed）