移动端Chrome网页布局/视口变化后，如何让Header固定在可视视口顶部？

我知道Stack Overflow上有多个相关问题，但随着浏览器团队的更新，这些方案已不再生效，现寻求最新解决方案。

目标 #

在移动端网页浏览器中实现类App体验：当用户聚焦输入框、虚拟键盘（OSK）弹出时，固定Header始终停留在顶部。

背景 #

近期Chrome移动端团队调整了布局视口与可视视口的处理逻辑，与iOS端Chrome及Safari对齐。当输入框聚焦、虚拟键盘弹出时，可视视口会上移，导致带有核心操作（如“保存”）的顶部Header被移出视野，严重影响UX（用户体验）。

我尝试了Chrome官方推荐的VisualViewport API，也使用了env(keyboard-inset-height)，但均未生效，怀疑是布局设置问题。

代码实现 #

采用CSS Grid布局：

HTML代码 #

<html>
<body>
  <div id="container">
    <header id="header">header</header>
    <main id="main">
      main
      <input type="text" />
    </main>
    <footer id="footer">footer</footer>
  </div>
</body>
</html>

CSS代码 #

body {
  margin: 0;
}

#container {
  height: 100dvh;
  display: grid;
  grid-template:
    "header" 50px
    "main" 1fr
    "footer" 50px
    "keyboard" env(keyboard-inset-height, 0px); /* 似乎不起作用？ */
}

#header {
  grid-area: header;
}

#main {
  grid-area: main;
  overflow-y: scroll;
}

#footer {
  grid-area: footer;
}

当前问题 #

输入框聚焦时，整个可视视口上移，Header被移出屏幕。请问目前是否有可行方案确保Header始终停留在可视视口顶部？

内容的提问来源于stack exchange，提问作者Dan L