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

• Component: CSS
• Status: NEW

[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

Friendly ping. Any news here? It's been 4.5 yrs

For anyone who runs into this: I've come up with a workaround that covers 90% of the use-case, and only requires a bit of CSS:

```css
.safe-area-bottom {
  :root:not( :has( input:focus-visible, textarea:focus-visible ) ) & {
    padding-bottom: env( safe-area-inset-bottom, 0 );
  }
}
```

The gist is this: Only apply `safe-area-inset-bottom` if the document does not contain an input or textarea with `:focus-visible`.

There is one drawback: input elements can have `:focus-visible` with the keyboard dismissed, at least on Chrome for Android. This means that the inset will not be applied if the input is focused and the user dismissed the keyboard.

(I'm probably forgetting elements that can cause the virtual keyboard to pop up, like `contenteditable`. YMMV.)

Wrote a quick blog post on the issue: https://webventures.rejh.nl/blog/2025/safe-area-inset-bottom-does-not-update/

I was able to work around this using the visualViewport API:

(in JS)

window.visualViewport?.addEventListener('resize', () => {
	const docEl = document.documentElement;

	requestAnimationFrame(() => {
		if (!window.visualViewport) {
			return;
		}

		docEl.classList.toggle(
			'visual-viewport-shrunken',
			window.visualViewport.height < docEl.clientHeight
		);
	});
}

(in CSS)

:root.visual-viewport-shrunken:has(:focus-visible) {
	/* Remove unnecessary bottom inset when keyboard is shown */
	--safe-area-inset-bottom: 0px;
}

Then using `var(--safe-area-inset-bottom)` in CSS rather than `env(safe-area-inset-bottom)`.