Please see the video for a demonstration of the issue:

<https://youtu.be/IISO_m39CgA>

When the input is clicked, they keyboard and bottom banner hides the input so the user cannot see what they're typing. One option would obviously be to increase the height of the content but i would like it to stay the height it is.
I am not sure what the solution is. This is not an issue on iPhone due to how the focusing on inputs works.

```css
.title {
  text-align: center;
}

.bottom-banner {
  bottom: 0;
  border: 1px solid #e8e9ed;
  background: red;
  left: 0;
  padding: 30px;
  position: fixed;
  /* position: -webkit-sticky;
        position: sticky; */
  width: 100%;
}

.slide-down {
  /* display: none; */
}

.content {
  margin-top: 50px;
  overflow: auto;
}
```

```html
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <title>Document</title>
</head>

<body>
  <div>
    <h1 class="title">Welcome to the App</h1>
    <div class="content">
      <button class="button">Toggle content</button>
      <div class="slide-down">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ipsum eget arcu ullamcorper vehicula. Quisque luctus pulvinar dui ut commodo. Integer ut ex velit. Phasellus vulputate risus et sapien rhoncus, et bibendum nisi pulvinar. Quisque
        faucibus massa ut placerat malesuada. Mauris non faucibus lorem. Suspendisse porttitor rhoncus risus vitae dignissim. Donec ac tincidunt ligula. Vivamus aliquet enim eget augue hendrerit mollis. Pellentesque convallis nisi tempor sagittis tempus.
        Integer lacinia nisl magna
      </div>
      <br /><br /> Input number:
      <input type="number" />
    </div>
    <div class="bottom-banner">
      this is the content inside of the bottom banner
    </div>
  </div>
</body>

</html>
```