Safari 中的虚拟键盘导致应用程序主体下方出现黑色空间并滚动到其外部

Question

我正在 React 创建一个聊天机器人应用程序。它在其他浏览器上工作正常，但在 Safari 上，每当虚拟键盘打开时，它都会导致整个主体变得可拖动，滚动条延伸到主体下方，并且主体下方和键盘上方出现黑色空间。

这是截图：

这是我的 App.css 的样子：

body {
  overflow: auto;
  height: 100%;
  min-height: 100%;
  overscroll-behavior: none;
}

html {
  overflow: hidden;
  height: 100%;
}

我尝试过设置

height: 100vh;
min-height: 100vh;

在html和body标签上，但它没有做任何事情。如果我戴上overflow: hidden它body，就会弄乱内部容器滚动条，就像我在某处看到推荐的那样使用position: fixed它时，就会弄乱内部容器滚动条。body是否有一个纯 CSS 解决方案，或者我错过了一些明显的东西？提前致谢。