IOS Safari скрывает нижний ряд сетки за панелью действий

Question

У меня есть базовая сетка с 1 столбцом и 3 строками.Проблема, с которой я сталкиваюсь, заключается в том, что последний ряд, назовем его нижним колонтитулом, скрыт за панелью действий IOS-сафари.Одно из решений состояло в том, чтобы расположить его фиксированным, но это затем убирает нижний колонтитул от потока сетки.Причина, по которой я не могу установить его как фиксированный, заключается в том, что мне нужно изменить строку над нижним колонтитулом в соответствии с нижним колонтитулом (например, мессенджер, расширяющий вход в чат).

Есть ли способ сделать этонагрузка на верхнюю часть панели действий без нарушения потока сетки?Chrome, Firefox и т. Д. Запустите его выше.

HTML

<div class="wrapper">
  <nav></nav>
  <main></main>
  <footer></footer>
</div>>

CSS

.wrapper {
  display: grid;
  grid-template-rows: 80px 1fr minmax(80px, auto);
  grid-template-columns: 1fr;
}

.nav {
  background: red;
  grid-row: 1 / 2;
}

.nav {
  background: blue;
  grid-row: 2 / 3;
}

.footer {
  background: green;
  grid-row: 3 / -1;
}