iOS Safari safe-area/standing bar reveals strong background as a substitute of permitting content material to scroll behind it (viewport-fit=cowl + fastened header)

I’m testing a React/Tailwind website on an iPhone (Safari). I would like the web page content material (hero picture/background) to scroll behind the iOS standing bar / notch space, however as a substitute the highest safe-area area stays a strong shade (BLACK) (seems to be just like the web page background is “painted” behind the standing bar).

I have already got:

<meta title="viewport" content material="width=device-width, initial-scale=1.0, maximum-scale=1, viewport-fit=cowl" />

My header is place: fastened, and the remainder of the web page scrolls usually.

Anticipated

The hero/background ought to visually lengthen behind the standing bar space (like many native-style websites/apps), with the fastened navbar nonetheless sitting under the notch (protected space).

Precise

The area behind the standing bar is a strong shade and doesn’t present the scrolling content material behind it.

Related CSS (Tailwind + customized base kinds)

@layer base {
  :root {
    --background: 26 39% 93%;
    --foreground: 255 5% 15%;
  }

  html {
    background-color: hsl(var(--background));
  }

  physique {
    @apply bg-background text-foreground antialiased;
    min-height: 100dvh;
    margin: 0;
  }

  #root {
    min-height: 100dvh;
  }
}

I consider html/physique background is what Safari is utilizing to fill the safe-area area, however I’m undecided what the proper setup is.

Header (fastened)

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

Query

What’s the appropriate method to arrange background + protected space in order that:

1. The content material can visually lengthen behind the standing bar/notch (viewport-fit=cowl)

2. The standing bar space is just not a strong background

3. The fastened header nonetheless respects the protected space (doesn’t collide with the notch)

If the answer is to make html/physique clear and transfer the background to a wrapper, what’s the really useful sample for React/Tailwind?

What I attempted

• Added viewport-fit=cowl

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

• However the prime area nonetheless seems to be strong (not displaying the content material behind it)

Further context

That is solely taking place on iOS Safari. Desktop browsers look regular.