iOS Safari将底部网格行隐藏在操作栏后面

Question

我有一个基本的网格，设置了1列和3行。我面临的问题是，最后一行（称为页脚）隐藏在IOS野生动物园操作栏的后面。一种解决方案是将其固定在位，但是那会使页脚远离网格流。我之所以无法将其设置为固定，是因为我需要根据页脚更改页脚上方的行（例如Messenger扩展聊天输入）。

有什么方法可以将其加载到操作栏顶部而不会干扰网格流？ 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;
}