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

[Anonymous]

Я строю приложение React + конденсатор с липким заголовком (

Код: Выделить всё

position: sticky; top: 0;< /code>).
на iOS (Safari PWA и конденсатор WebView), когда клавиатура открывается, заголовок внезапно растягивается, как будто увеличивается в безопасное место. Когда клавиатура закрывается, заголовок возвращается к нормальному. />  css: < /p>
: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>
< /li>
  Использование Transtatez (0) < /code> и Will-change. Изменить размер событий с небольшим "Poke" (translateY -1px

и назад).

Переключение наложения: false исправляет растяжение - но вводит уродливую черную полосу вверх Statusbar.setoverlayswebview ({overlay: true}) (без черной панели)?>

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