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

我正在开发一个web应用程序，在iOS上遇到了一个问题：在页面底部，当我进一步向下滚动时，带有设置图标的灰色条会随着页面的其余部分向上移动，，即使它是“位置：已修复”。我需要它保持原位

在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">

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