iOS Safari safe-area/status bar shows solid background instead of allowing content to scroll behind it (viewport-fit=cover + fixed header)

I’m testing a React/Tailwind site on an iPhone (Safari). I want the page content (hero image/background) to scroll behind the iOS status bar / notch area, but instead the top safe-area region stays a solid color (BLACK) (looks like the page background is “painted” behind the status bar).

I already have:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, viewport-fit=cover" />

My header is position: fixed, and the rest of the page scrolls normally.

Expected

The hero/background should visually extend behind the status bar area (like many native-style sites/apps), with the fixed navbar still sitting below the notch (safe area).

Actual

The region behind the status bar is a solid color and does not show the scrolling content behind it.

Relevant CSS (Tailwind + custom base styles)

@layer base { :root { --background: 26 39% 93%; --foreground: 255 5% 15%; } html { background-color: hsl(var(--background)); } body { @apply bg-background text-foreground antialiased; min-height: 100dvh; margin: 0; } #root { min-height: 100dvh; } }

I believe html/body background is what Safari is using to fill the safe-area region, but I’m not sure what the correct setup is.

Header (fixed)

<header className="fixed inset-x-0 top-0 z-50 px-4 pt-4"> ... </header>

Question

What is the correct way to set up background + safe area so that:

The content can visually extend behind the status bar/notch (viewport-fit=cover)

The status bar area is not a solid background

The fixed header still respects the safe area (doesn’t collide with the notch)

If the solution is to make html/body transparent and move the background to a wrapper, what’s the recommended pattern for React/Tailwind?

What I tried

Added viewport-fit=cover

Tried adjusting safe-area padding (env(safe-area-inset-top))

But the top region still looks solid (not showing the content behind it)

Extra context

This is only happening on iOS Safari. Desktop browsers look normal.