Bug 217754 - Safe-area-inset-bottom still set when keyboard appears
Summary: Safe-area-inset-bottom still set when keyboard appears
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: iPhone / iPad All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-10-15 07:24 PDT by Charlie Croom
Modified: 2021-09-15 01:10 PDT (History)
8 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
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