safe-area-inset-bottom stays at nav-bar height while the keyboard is open

Test build for the reported issue · thanks to Arif for the report · arm64 Chromium built from origin/main + the fix

The report

In a standalone PWA with viewport-fit=cover and the short-edges cutout experiment enabled, opening the keyboard leaves env(safe-area-inset-bottom) at the navigation-bar height (e.g. 44px) even though the keyboard now covers that area. Bottom UI that follows the visual viewport above the keyboard then floats an extra bar-height too high.

Cause

When the browser safe area is merged for cover-mode web apps, the visible IME was only subtracted from the navigation-bar inset for interactive-widget=resizes-content pages. Pages using the default resizes-visual mode (layout viewport keeps its size, only the visual viewport shrinks) kept the full bar inset, so env(safe-area-inset-bottom) never dropped while the keyboard was up.

The fix treats resizes-visual like resizes-content and subtracts the IME from the bottom inset. overlays-content (VirtualKeyboard API) intentionally keeps the stable bar inset, since those pages use env(keyboard-inset-*) instead.

Second round: the first build of this fix still failed on device. A page that never declares interactive-widget does not report resizes-visual - it reports unset, and the Android platform default for unset is resizes-visual. The first attempt only matched the explicit modes, so it never fired for ordinary pages. The current build treats unset as a resizing mode.

Test build (v2, rebuilt after the first attempt failed on device)

Download Chromium APK (arm64, ~665 MB)

How to reproduce and verify

  1. Install the APK. It is a separate app (org.chromium.chrome, labelled Chromium) next to Chrome/Canary - open that app, not Chrome. chrome://version should read 157.0.8080.0 / org.chromium.chrome.
  2. In Chromium, open chrome://flags.
  3. Search for Web App Short Edges Cutout Mode (flag id web-app-short-edges-cutout-mode) and pick Enabled (Standalone also enabled), then Relaunch.
  4. Open the password sampler inside Chromium and install it to the home screen (menu → Add to Home screen / Install), then launch it from that icon.
    Important: a home-screen icon created earlier by Chrome or Canary keeps opening that browser, so it will not contain the fix. Remove the old icon first, or check the browser row described below.
  5. Focus the password field so the keyboard opens, and read the LIVE STATUS panel.

Identifying the build: navigator.userAgent reports a reduced version (157.0.0.0 for every Chrome 157), so it cannot tell builds apart. The browser row in LIVE STATUS therefore resolves the real version through high-entropy client hints and should read Chromium 157.0.8080.0 for this build. If it shows Google Chrome, or a different build number, the app that opened is not this APK - most often because the home-screen icon still belongs to the browser that installed it.

metric (keyboard open)beforewith this build
safe-area-inset-bottomnav-bar height, e.g. 44px0px
safe-area-inset-topstatus-bar height, e.g. 37pxunchanged
innerHeightunchanged while keyboard opensunchanged (resizes-visual)
visualViewport.heightshrinks above the keyboardunchanged behavior

With the keyboard closed, safe-area-inset-bottom should still report the navigation-bar height in both builds - the inset only clears while the keyboard covers it.

Status

display modenavigationbeforewith this build
fullscreen3-button48px0px
fullscreengesture24px0px
standalonegesture24px0px
standalone3-button48px0px

Standalone PWA with the keyboard open showing safe-area-inset-bottom 0