iOS Web App：禁用位置的橡皮筋滚动：固定元素

Question

我正在开发一个网络应用程序并在iOS上遇到问题：在页面底部，当我进一步向下滚动时，带有设置图标的灰色栏随着页面的其余部分向上移动，即使它的位置：固定＆＃34; 。我需要它留在原地。

在Safari 中打开页面时不会发生，只有将其添加到主屏幕并从那里打开。

我使用以下元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

灰色条的CSS看起来像这样

#bottom-menu {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: stretch;
  background-color: #222;
}