iOS Safari Safe-Area Fix

What it does

• Diagnoses the real root cause: iOS Safari composites the scrolling document’s pixels behind the status bar, and position:fixed elements don’t count.
• Fixes it with an app-shell — lock the document and scroll an inner container — so the top strip stays a solid color.
• Ships copy-pasteable Next.js App Router code (globals.css, layout, and the scroll listener).
• Handles the companion changes: scroll listeners, hash navigation, framer-motion whileInView reveals, and viewport-fit=cover tradeoffs.

Fixes iOS Safari (including iOS 26 “Liquid Glass”) status-bar and safe-area bleed on scrolling web pages — the bug where page content shows through the translucent status bar behind the clock and battery, or a white bar appears behind Safari’s toolbar. The root cause: iOS Safari composites the scrolling document’s pixels behind the translucent status bar, and position:fixed elements do not count, so no opaque fixed header can cover it. The fix is an app-shell — lock the document (html, body { height: 100dvh; overflow: hidden }) and scroll an inner container instead, so the top strip stays a solid background color. Ships copy-pasteable Next.js App Router code.