Android Chrome全屏模式下100dvh超出底部问题排查与解决问询

问题场景 #

我在HTML页面中使用以下CSS时，红色边框能正常环绕全屏（桌面端、移动端均正常）：

html {
  border: 5px solid red;
  box-sizing: border-box !important;
  height: 100dvh;
}

但在Android Chrome中调用requestFullscreen进入全屏模式后，页面会超出底部，底部红色边框不可见。触摸屏幕触发页面重绘后，该问题可自动修复。

最小复现场景需在Android Chrome中测试，代码包含HTML、CSS及触发全屏的JS逻辑。

核心疑问 #

1. 该问题是否可复现？
2. 这属于浏览器Bug吗？
3. 有没有修复或规避方案？

环境信息 #

• Chrome版本：116.0.5845.163
• 系统：Android 13
• 设备：三星S22 Ultra

截图说明 #

1. 全屏前：红色边框完整环绕页面
2. 刚进入全屏时：页面底部溢出，红色下边框不可见
3. 触摸屏幕后：页面重绘，红色边框恢复正常显示
   

问题解答 #

1. 可复现性 #

该问题在指定环境（Android 13 + Chrome 116 + 三星S22 Ultra）下可稳定复现，且在部分其他Android Chrome版本/设备中也存在类似的dvh单位在全屏模式下的计算异常问题。

2. 是否为Bug？ #

属于Chrome移动端的渲染Bug。原因是进入全屏模式时，浏览器未及时更新dvh（动态视口高度）的计算值，导致元素高度仍沿用全屏前的视口高度，而全屏模式下实际可用视口高度更大，最终造成元素底部溢出，边框被隐藏。触摸屏幕触发重绘时，浏览器重新计算了视口高度，才修正了元素尺寸。

3. 修复/规避方案 #

提供以下几种可行方案：

• 强制触发重绘：在进入全屏模式的回调中，主动触发页面重绘，比如修改元素的某个无视觉影响的CSS属性：

  document.documentElement.requestFullscreen().then(() => {
    // 触发重绘
    document.documentElement.style.transform = 'translateZ(0)';
    // 立即还原，不影响样式
    setTimeout(() => {
      document.documentElement.style.transform = '';
    }, 0);
  });
  

• 改用JavaScript动态设置高度：监听全屏切换事件，手动计算并设置元素高度为当前视口高度：

  function updateFullscreenHeight() {
    if (document.fullscreenElement) {
      document.documentElement.style.height = `${window.innerHeight}px`;
    } else {
      document.documentElement.style.height = '100dvh';
    }
  }
  // 监听全屏切换
  document.addEventListener('fullscreenchange', updateFullscreenHeight);
  // 初始设置
  updateFullscreenHeight();
  

• 降级使用100vh配合全屏API的样式修正：全屏模式下无地址栏干扰，可在全屏时切换为100vh：

  html {
    border: 5px solid red;
    box-sizing: border-box !important;
    height: 100dvh;
  }
  html:fullscreen {
    height: 100vh;
  }
  

  注：部分旧版本Chrome可能仍需配合重绘触发。

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