Bug 217754 – Safe-area-inset-bottom still set when keyboard appears

• Status: NEW
• Component: CSS

[Charlie Croom]

The safe-area-inset-* are designed to prevent content in a rectangular viewport from being made invisible on certain devices with insets.

On twitter.com, we use "safe-area-inset-bottom" to ensure the items at the bottom of the screen do not overlap the home button. We would expect that extra padding to disappear when the keyboard appears, since the viewport is once again rectangular, there should be no insets, but it does not do so automatically. This gives us a white space between the keyboard and content which we can't control and causes a poor layout.

Potentially related to https://bugs.webkit.org/show_bug.cgi?id=191363, not sure how keyboard / orientation changes might be handled

[Radar WebKit Bug Importer]

<rdar://problem/70573100>

[Wart Claes]

Since the floating address bar has been removed, we now have the issue that is is still "floaty" when the on screen keyboard is open, creating the issue that the address bar is above one of our UI elements when you focus the input field and it is not possible to clear that space with safe-area-inset-*.

https://codepen.io/WartClaes/pen/gORGJPJ

Created attachment 465677 [details]
Testcase for safe-area-inset-bottom not updating when software keyboard is visible

I've created a reduced testcase that demonstrates the issue (attached).

Also available here:
https://testcase.rejh.nl/webkit-safe-area-inset-does-not-update/

Steps to reproduce the issue are included.

Would be great to see a fix as this issue is now ~2.5 yrs old?

Created attachment 465678 [details]
Screenshot that demonstrates the issue