flexbox - 键盘以全屏模式覆盖内容（Chrome 移动版）

Question

在我们的 HTML 聊天应用程序中，用户应该有机会进入全屏模式以隐藏导航栏并获得更好的用户体验。我们有一个简单的布局：

<div id="chat">
  <div id="header"></div>
  <div id="messages"></div>
  <div id="write">
    <input type="text" placeholder="Your message..."/>
  </div>
</div>

我们的布局是一个弹性布局：

#chat {
 display: flex;
 flex-direction: column;
}

#header {
 height: 60px;
}


#messages {
 flex: 2;
}

#write {
 height: 60px;
}

如果我们进入全屏并单击文本输入字段，键盘会打开并覆盖大部分内容。所以用户看不到他正在输入的单词。没有全屏模式，一切正常。

我们要求全屏显示“body”元素：

$("body").requestFullscreen();

此问题是否有任何解决方法/修复？