IOS PWA (добавить на главный экран): белый пробел под нижней панелью навигации, 100dvh не заполняет весь экран с помощью ⇐ IOS

[Anonymous]

Я создаю PWA Nuxt 4, установленный через Safari «Добавить на главный экран» на iOS. В приложении есть нижняя панель навигации, которая должна располагаться на одном уровне с нижней частью экрана, заполняя зону индикатора дома (безопасной зоны) своим фоном. Вместо этого между нижней панелью навигации и физическим краем экрана виден видимый белый зазор.
https://imgur.com/a/7zfRUHc
Настройка
Метатег области просмотра:

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

Метатеги Apple PWA:

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

Манифест PWA использует «display»: «standalone».
CSS (базовый уровень):

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

:root {
--safe-area-top: env(safe-area-inset-top, 0px);
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
--safe-area-left: env(safe-area-inset-left, 0px);
--safe-area-right: env(safe-area-inset-right, 0px);
}

html {
overflow: hidden;
}

body {
padding-left: var(--safe-area-left);
padding-right: var(--safe-area-right);
overscroll-behavior: none;
overflow: hidden;
margin: 0;
}

Макет (обертывает все страницы):

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

CSS нижней навигации:

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

.bottom-nav {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
border-top: 1px solid #e5e7eb;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 30;
flex-shrink: 0;
padding-bottom: max(12px, env(safe-area-inset-bottom));
padding-top: 8px;
}

BottomNav — это гибкий дочерний элемент (не позиция: фиксированная) внутри гибкого контейнера h-[100dvh]. Он использует padding-bottom: max(12px, env(safe-area-inset-bottom)), чтобы поместить его содержимое выше индикатора домашней страницы, одновременно заполняя безопасную область своим фоном.
Проблема
В автономном PWA iOS (Добавить на главный экран) 100dvh, похоже, разрешается в области просмотра, исключая вставку нижней безопасной области (~34 пикселя). на iPhone с индикатором Home). Это означает, что весь гибкий макет, включая BottomNav и его заполнение безопасной области, содержится в блоке, который примерно на 34 пикселя короче физического экрана. В результате между нижней частью навигации и краем экрана появляется белый зазор.
Что я пробовал

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

  body { padding-bottom: env(safe-area-inset-bottom) }

  [/b] — Заполняет пробел между фоном основного текста, но теперь размер макета 100dvh превышает область содержимого основного текста, а добавление overflow:hidden обрезает его. Удаление переполнения позволяет прокручивать текст, что нарушает фиксированный заголовок.

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

  body { position: fixed; inset: 0 }

  [/b] — В WebKit тело позиции: фиксированное по-прежнему разрешает высоту: 100% для области просмотра безопасной области, а не для всего физического экрана. Тот же разрыв.

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

  position: fixed; inset: 0

  [/b] в div-оболочке Nuxt (

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

  #__nuxt

  ) — тот же результат.

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

  position: fixed; inset: 0

  [/b] непосредственно в корневом элементе div макета — это заполняет экран правильно, но затем высота в процентах (

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

  h-full

  ) на дочерних страницах не разрешается, поскольку Nuxt вставляет промежуточные оболочки (Suspense, router-view) без явных высот.

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

  height: -webkit-fill-available

  [/b] на html/body — в автономном PWA эффекта нет.

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

  min-h-screen

  вместо h-[100dvh][/b] в макете — 100vh на iOS имеет ту же проблему в автономном режиме. Также заставляет заголовки страниц прокручиваться вместе с содержимым, а не оставаться фиксированными.

Желаемое поведение
Приложение должно заполнять весь физический экран от края до края. Padding-bottom: max(12px, env(safe-area-inset-bottom)) элемента BottomNav должен расширять свой фон до области домашнего индикатора, чтобы не было видимого зазора. Заголовок должен оставаться фиксированным вверху, и прокручиваться должна только область содержимого между заголовком и навигацией.
Среда

• iOS 26 (iPhone с индикатором «Домой»)
• Safari → Добавить на главный экран (автономный PWA)
• Nuxt 4 (

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

  ^4.3.0

  ) с @vite-pwa/nuxt
• Tailwind CSS

Как мне заставить 100dvh (или любой другой подход CSS) заполнять весь физический экран в автономном PWA iOS с viewport-fit=cover?

Подробнее здесь: https://stackoverflow.com/questions/799 ... 00dvh-does