PWA on iOS... fighting the chin gap.
I've been looking into the PWA on iOS and was struggling to get rid of the bottom chin gap until I started deleting stuff and made some realisations: stuff that people recommend here is broken if it used to work.
This is my testing zone: https://pwa-test.xefig.workers.dev/
Essentially
iOS standalone mode (display: standalone in the manifest) automatically extends your app edge-to-edge, behind the status bar and home indicator, using the page's background colour.
You do not need viewport-fit=cover or manual safe area handling to achieve this.
The minimal setup that gives you a true fullscreen PWA on iOS:
// manifest.json
{
"display": "standalone",
"background_color": "#1a1a2e"
}
<!-- index.html -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="PWA Test" />
<meta name="theme-color" content="#1a1a2e" />
<link rel="manifest" href="/manifest.json" />
iOS fills the status bar and home indicator areas with background_color from the manifest (falling back to the page background).
Content goes into the safe zone automatically.