Search code examples
csswebkitmobile-safari

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

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>

Solution

  • The bug is now fixed in iOS 15.1