Bug 217754

Summary: Safe-area-inset-bottom still set when keyboard appears
Product: WebKit Reporter: Charlie Croom <charlie.croom>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bdakin, ik, kenneth, matan.hershberg, mmzeeman, simon.fraser, smoley, thorton, wart.claes, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: iPhone / iPad   
OS: All   
Attachments:
Description Flags
Testcase for safe-area-inset-bottom not updating when software keyboard is visible
none
Screenshot that demonstrates the issue none

Description Charlie Croom 2020-10-15 07:24:45 PDT 
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
Comment 1 Radar WebKit Bug Importer 2020-10-22 07:25:16 PDT 
<rdar://problem/70573100>
Comment 2 Wart Claes 2021-09-15 01:10:45 PDT 
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
Comment 3 ik 2023-03-30 07:32:44 PDT 
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?
Comment 4 ik 2023-03-30 07:42:24 PDT 
Created attachment 465678 [details]
Screenshot that demonstrates the issue