配置display:fullscreen的Android端PWA触摸时系统导航栏与状态栏异常弹出

问题根因 #

该问题是Android 11系统推送安全更新后，Chrome v94+版本内核引入的已知兼容性缺陷，与PWA的代码变更、manifest配置均无关，未做修改的旧PWA也会受对应版本Chrome的影响触发该异常：应用启动时可正常进入全屏，但每次触发触摸事件时，顶部状态栏和底部导航栏会短暂弹出，表现与standalone显示模式的默认效果一致。

修复方案 #

• 官方修复：谷歌已于Chrome v102及后续稳定版本推送了该问题的补丁，优先升级手机端Chrome浏览器到最新稳定版，删除原有PWA快捷方式后重新添加到桌面即可解决问题。
• 临时规避（适用于无法升级Chrome的场景）：在PWA全局CSS中添加以下规则，禁止过度滚动行为避免触发系统栏唤起：

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

• 补充修复：如果添加CSS后仍有偶发的系统栏弹出，可以新增以下JS逻辑主动维持全屏状态：

// 仅在PWA全屏运行时生效
if (window.matchMedia('(display-mode: fullscreen)').matches) {
  document.addEventListener('touchstart', () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen().catch(() => {});
    }
  }, { passive: true });
}

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