iOS Web App: disable rubber band scrolling for position: fixed elements

Question

I am developing a web app and running into a problem on iOS: at the bottom of the page, when I scroll down further, the grey bar with the settings icon is moving up with the rest of the page, even though it's "position: fixed". I need it to stay in place.

This is NOT happening when the page is opened in Safari, only after adding it to the home screen and opening it from there.

I am using the following meta tags:

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

The grey bar's CSS looks like this

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