web: iPadOS 27 status-bar blur washes over the tab strip in the home screen app #56969

Description

When the web app is added to the Home Screen on iPadOS 27 and launched standalone, iOS draws a blurred scrim over the status bar area that washes over the tab strip below it, in both light and dark themes.

Since iOS 26.1, Apple renders a system blur over the status bar of Home Screen web apps using apple-mobile-web-app-status-bar-style: black-translucent (see WebKit bugs 317153 and 301994); it can't be disabled from the page. The existing mitigation — the 16px mobileTopClearance gap in packages/app/src/shell/titlebar/titlebar.tsx (#53297) — only applies when mobileTop() is true, i.e. platform === "web" and viewport ≤767px. iPad viewports are ≥768px, so the desktop branch runs with padding-top: env(safe-area-inset-top, 0px) and no clearance, placing the tab strip flush against the blur band.

Possible fixes: extend the clearance to standalone mode on wide viewports, or drop the black-translucent meta tag per Apple's guidance in WebKit bug 317153 (caveats: iOS reads the tag at install time so users must reinstall, safe-area-inset-top becomes 0, and WebKit bug 316008 says 100vh/100lvh include the status bar height when the tag is absent — needs device verification since #root uses 100vh in standalone).

Plugins

None (web app)

OpenCode version

2.0.32 (local build of packages/app from dev; same code path ships in production)

Steps to reproduce

1. Serve packages/app locally and open it in Safari on iPadOS 27.
2. Share → Add to Home Screen.
3. Launch the app from the Home Screen icon (standalone display mode).
4. Observe the blurred band over the status bar region bleeding into the tab strip row.

Screenshot

To be attached.

Operating System

iPadOS 27 (Safari → Add to Home Screen standalone web app)

Terminal

N/A (web app)