reactjs – iOS Safari / Capacitor: Header stretches down when keyboard opens (with StatusBar.setOverlaysWebView({ overlay: true }))

I’m constructing a React + Capacitor app with a sticky header (place: sticky; high: 0;).
On iOS (Safari PWA and Capacitor WebView), when the keyboard opens, the header instantly stretches down as if safe-area-inset-top elevated. When the keyboard closes, the header goes again to regular.

I need the header to stay secure: no stretching down when keyboard opens, but additionally no ugly black standing bar (so I desire StatusBar.setOverlaysWebView({ overlay: true })).
Instance Code

CSS:

:root {
  --header-height: 56px;
  --safe-top: env(safe-area-inset-top);
  --header-total: calc(var(--header-height) + var(--safe-top));
}

.app-header {
  place: sticky;
  high: 0;
  z-index: 40;
  peak: var(--header-total);
  padding-top: var(--safe-top);
  background: white;
  border-bottom: 1px strong #ddd;
}

React Header:

export default perform Header() {
  return (
    

      
    
  );
}

Capacitor init:

import { Capacitor } from '@capacitor/core';

async perform initNativeUi() {
  if (!Capacitor.isNativePlatform()) return;
  const { StatusBar, Model } = await import('@capacitor/status-bar');

  await StatusBar.setOverlaysWebView({ overlay: true }); // ✅ no black bar
  await StatusBar.setStyle({ type: Model.Darkish });
  await StatusBar.present();
}

What I’ve tried

Locking header peak with min-height and max-height.

Utilizing translateZ(0) and will-change.

Utilizing visualViewport resize occasions with a small “poke” (translateY -1px and again).

Switching overlay: false fixes the stretching — however introduces the ugly black bar on the high, which I need to keep away from.

How can I stop the sticky header from stretching down on iOS when the keyboard opens, whereas protecting StatusBar.setOverlaysWebView({ overlay: true }) (no black bar)?

Is there a dependable sample to “lock” the safe-area inset on iOS so the header doesn’t transfer with the keyboard?