В безопасной зоне/строке состояния iOS Safari отображается сплошной фон вместо возможности прокрутки содержимого за ним ⇐ IOS

[Anonymous]

Я тестирую сайт React/Tailwind на iPhone (Safari). Я хочу, чтобы содержимое страницы (главное изображение/фон) прокручивалось за строкой состояния iOS/областью с вырезом, но вместо этого верхняя безопасная область оставалась сплошного цвета (ЧЕРНЫЙ) (выглядит так, будто фон страницы «нарисован» за строкой состояния).
У меня уже есть:

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

Положение моего заголовка: фиксированное, а остальная часть страницы прокручивается нормально.
Ожидается
Герой/фон должен визуально выходить за область строки состояния (как и многие сайты/приложения в нативном стиле), а фиксированная панель навигации по-прежнему находится под выемкой (безопасная область).
Фактическое
Область за строкой состояния выделена сплошным цветом и не отображает прокручиваемый контент.
Соответствующий CSS (Tailwind + пользовательские базовые стили)

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

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

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

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

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

Я считаю, что фон html/body — это то, что Safari использует для заполнения безопасной области, но я не уверен, какова правильная настройка.
Заголовок (исправлено)

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

...

Вопрос
Как правильно настроить фон + безопасную область, чтобы:

• Содержимое могло визуально выходить за строку состояния/выемку (

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

  viewport-fit=cover

  )
• Область строки состояния не является сплошным фоном
• Фиксированный заголовок по-прежнему учитывает безопасную область (не сталкивается с выемкой)

Если решение состоит в том, чтобы сделать html/body прозрачным и переместить фон в оболочку, какой рекомендуемый шаблон для React/Tailwind?
Что я пробовал

• Добавлен viewport-fit=cover
• Попытался настроить отступы безопасной области (

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

  env(safe-area-inset-top)

  )
• Но верхняя область по-прежнему выглядит сплошной (содержимое за ней не отображается)

Дополнительный контекст
Это происходит только в iOS Safari. Браузеры для настольных компьютеров выглядят нормально.



Подробнее здесь: https://stackoverflow.com/questions/799 ... wing-conte