NEW313800
iOS standalone PWA: visualViewport shorter than screen by full status-bar delta, orphan strip below page cannot be laid out in CSS/Dart
https://bugs.webkit.org/show_bug.cgi?id=313800
Summary iOS standalone PWA: visualViewport shorter than screen by full status-bar del...
arifkqasim
Reported 2026-04-30 21:40:07 PDT
We’re shipping a Flutter Web app as an Add to Home Screen / standalone PWA on iOS with viewport-fit=cover and apple-mobile-web-app-status-bar-style=black-translucent. Measured ground truth on device: screen.height = 874 visualViewport.height = 812 visualViewport.offsetTop = 0 env(safe-area-inset-top) = 62px env(safe-area-inset-bottom) = 34px 874 − 812 = 62px — that gap is not explained by safe-area-inset-bottom alone; it’s the entire “missing” vertical extent sitting below the web viewport. The problem: there is a ~62px band at the physical bottom of the display that is not part of the layout viewport the page is allowed to use. Flutter (and any full-screen web UI) can fill visualViewport correctly — content is not clipped at the top — but nothing in the web stack can place interactive UI or canvas pixels in that bottom strip because it sits outside the viewport WebKit exposes. The only lever we have is painting html/body so iOS doesn’t show it as default black. That is not a product fix; it’s cosmetic damage control. This is unacceptable for a platform that pushes PWAs and “install from Safari” as a first-class path. Either: Document officially that standalone Web on iPhone reserves this strip and how visualViewport, innerHeight, 100dvh, and env(safe-area-inset-*) relate to it, or Fix WebKit / the PWA shell so visualViewport + safe-area env vars describe one coherent rectangle developers can actually lay out into — without a mystery gutter below the viewport that no API can address. We’ve burned weeks on workarounds (safe-area packages, MediaQuery hacks, 100vh/dvh/-webkit-fill-available, visualViewport resize nudges, status-bar meta permutations). None of them remove the strip because the platform never gives that region to the page. That cost belongs to Apple/WebKit and to Flutter for not front-loading “here is what iOS PWA will not let you do” in the Web docs. Ask: acknowledge whether this is intended or a bug; if intended, publish exact geometry rules for standalone PWAs; if bug, track and fix with a public WebKit issue and a Flutter tracking issue so teams stop rediscovering the same black bar in production. Environment (fill in yours): iPhone 16 pro, iOS 26.3.1, Flutter and Safari are most recent stable versions
Attachments
Radar WebKit Bug Importer
Comment 1 2026-05-07 21:41:11 PDT
Schubert
Comment 2 2026-07-10 14:38:55 PDT
HASH(0x55986ca6f748)
Schubert
Comment 3 2026-07-10 14:41:45 PDT
Same geometry reproduced on iOS 27 beta 2 (iPhone 16 Pro Max): window.innerHeight=894 vs screen.height=956 (delta = 62 = this device's status-bar inset) with env(safe-area-inset-top) still resolving 62px inside the already-inset web view — the double inset described here. Additional data in bug 317153: the breakage tracks when the icon was ADDED. Icons added before the iOS 27 betas keep true edge-to-edge across OS updates; any fresh install on 27 beta 2/3 is letterboxed; and icons added on beta 3 report env(safe-area-inset-top)=0 and env(safe-area-inset-bottom)=0 instead of the double inset. (Apologies for the previous malformed comment - API hiccup on my side.)
Note You need to log in before you can comment on or make changes to this bug.