Safari虚拟键盘引发应用主体黑块与外部滚动异常问题

针对你遇到的Safari打开虚拟键盘时body可拖拽、滚动条溢出、出现黑块的问题，以下是纯CSS解决方案，核心是适配Safari的视口计算逻辑并正确分离滚动区域：

1. 基础样式调整（html/body） #

替换原有html/body样式，使用动态视口单位dvh（Safari 15.4+支持），它会自动排除虚拟键盘高度，避免视口被拉伸：

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

body {
  margin: 0;
  padding: 0;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: contain; /* 防止滚动溢出到body */
  touch-action: pan-y; /* 限制仅垂直滚动，禁止横向拖拽 */
}

2. 确保内部滚动容器正常工作 #

给聊天应用的核心滚动容器（比如.chat-container）设置以下样式，让它承担滚动任务，同时保留iOS平滑滚动特性：

.chat-container {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* 维持iOS上的平滑滚动体验 */
}

3. 兼容旧版Safari（可选） #

如果需要支持Safari 15.4以下版本，添加回退样式：

@supports not (height: 100dvh) {
  html, body {
    height: 100vh;
  }
}

4. 关键注意点 #

• 确保React根容器（#root）也设置100%高度，否则内部滚动容器无法正确占满空间：

  #root {
    height: 100%;
  }
  

• 不要直接给body设置position: fixed，会破坏内部滚动的定位逻辑；通过overflow: hidden锁定body滚动，让内部容器独立滚动是更稳妥的方式。

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