IOS Safari / конденсатор: заголовок растягивается, когда открывается клавиатура (с Statusbar.setoverlayswebview ({allay: ⇐ IOS

[Anonymous]

Я строю приложение React + конденсатор с липким заголовком (позиция: липкий; верх: 0;).
на iOS (Safari PWA и конденсатор WebView), когда клавиатура открывается, заголовок внезапно растягивается, как будто увеличивается безопасное место. Когда клавиатура закрывается, заголовок возвращается к нормальному.:root {
--header-height: 56px;
--safe-top: env(safe-area-inset-top);
--header-total: calc(var(--header-height) + var(--safe-top));
}

.app-header {
position: sticky;
top: 0;
z-index: 40;
height: var(--header-total);
padding-top: var(--safe-top);
background: white;
border-bottom: 1px solid #ddd;
}
< /code>
react Header: < /p>
export default function Header() {
return (



☰
LoyalFlow
⚙



);
}

< /code>
Конденсатор init: < /p>
import { Capacitor } from '@capacitor/core';

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

await StatusBar.setOverlaysWebView({ overlay: true }); // no black bar
await StatusBar.setStyle({ style: Style.Dark });
await StatusBar.show();
}

< /code>
Что я попробовал < /p>
Высота заголовка блокировки с Min-Height и Max-height. < /p>
Использование Transtatez (0) и Will-Change. < /p>
Использование событий VisualViewport с помощью небольшого «POKE» (Translatey -1px и назад). Overlay: False Исправляет растяжение - но вводит уродливую черную полосу в верхней части, которой я хочу избежать. Вставка безопасной области на iOS, чтобы заголовок не двигался с клавиатурой?

Подробнее здесь: https://stackoverflow.com/questions/797 ... h-statusba