Веб-приложение React для iPhone Notch не рассматривается ⇐ Html

[Anonymous]

Сейчас я создаю веб-сайт React с разделом Hero вверху, включая заголовок и фоновое изображение. Когда я тестирую свое приложение локально на своем iPhone 13, Notch и окружающая его безопасная зона становятся белыми. Этого и следовало ожидать, поскольку фон приложения белый, однако это выглядит не очень хорошо, поскольку фоновое изображение раздела «Герой» намного темнее.
Чтобы бороться с этим, я попробовал несколько вещей: либо попытаться заполнить вырез черным, либо расширить раздел «Герой» вверх.
Я попробовал добавить viewport-fit=cover в метатег


и примененные вставки безопасной области
body {
padding-top: env(safe-area-inset-top);
}

вместе с различными методами «грубой силы», пытающимися установить отрицательные поля или установить цвет фона, но либо все приложение становится черным, либо надоедливая белая полоса все еще насмехается над мной.
Текущий технический стек — React, Typescript, Tailwind
Как я могу сделать так, чтобы белая полоса менялась на черную, закрывая вырез, но оставалась только вверху страницы т. е. не следует за прокруткой или так, что главный раздел поднимается вверх?
Ниже приведен фрагмент главной страницы (не уверен, достаточно или слишком много, поскольку это мой первый пост)


[img]{Background}
className="absolute inset-0 w-full h-full object-cover object-[50%_70%] z-0"
/>






{--rest of code--}



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