IOS Safari – выход содержимого из строки состояния в iframe во всю высоту ⇐ IOS

[Anonymous]

Я работаю над магазином билетов, который вы можете отобразить на своем веб-сайте через iframe, и столкнулся с проблемами в iOS (26) Safari. Наша собственная страница также использует iframe для отображения части магазина поверх списка событий. Когда открывается полноразмерный iframe, я вижу следующее:



Примечание: iframe — это все, вплоть до строки состояния.

Интересно, что когда iframe открыт и прокрутка находится в верхней части страницы, этого не происходит, вместо этого полоса становится непрозрачной с примененным к ней цветом фона тела, но как только вы прокручиваете, она снова становится прозрачной. Изображение, которое вы видите внутри строки состояния, отображается на базовой странице.
Я пробовал десятки исправлений, таких как viewport-fit=cover, мета-тема-цвет и еще много чего. Кажется, ничего не работает. Я использую dvh в качестве единицы измерения для тела и HTML, и оба имеют цвет фона.
Код и интеграция
Вот фрагменты кода, относящиеся к интеграции на главной странице:

CSS

/* applied to iframe and display page */
body,
html {
@apply bg-background! h-dvh! w-dvh! appearance-none!;
}

Компонент IFrame

'use client';

// ...

export default function IFrameIntegrationCore({ draft }: Props) {

// ...

return (




);
}

export type { Props as IFrameIntegrationCoreProps };

Стили отображаемой страницы:

const checkoutFrameVariance = cva('block z-10000 bg-background!', {
variants: {
mode: {
dialog:
'surface overflow-hidden not-event-page:rounded-none event-page:max-h-[1045px]! h-full event-page:h-6/7 -translate-2/4 w-full event-page:w-event-page fixed top-1/2 left-1/2',
fullscreen: 'overflow-hidden rounded-none h-full w-full fixed top-0 left-0',
page: 'overflow-hidden rounded-none size-full flex flex-col',
},
},
defaultVariants: {
mode: 'dialog',
},
});


Подробнее здесь: https://stackoverflow.com/questions/798 ... ght-iframe