Show hidden content under iOS 15 address bar when keyboard is active

Question

iOS 15 leads to content being hidden under the address bar when the virtual keyboard is active. A bug report can be found here. To see the problem, run the snippet in full size on an iPhone with iOS 15 with the address bar on the bottom and press the input field. Alternatively check out this codepen

How can I show the input field when the keyboard is active? I've tried setting padding to safe-area-inset-bottom with no luck.

.container {
  display: flex;
  height: 100vh;
}
.input-bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="input-bottom">
    <input /><button>Post</button>
  </div>
</div>

Cristencristi

This is still an issue for me. I've also tried env() but it does not work. I'm having to manually add margin to the input field. – Spicebush

Answer 1

The bug is now fixed in iOS 15.1

Cristencristi