iPad端Chrome浏览器新开标签页出现视口高度异常问题

根因说明 #

这是iPadOS 95.x版本Chrome的已知内核bug：新开标签页时浏览器还未完成底部工具栏渲染，就提前计算了视口高度，把工具栏本身要占用的高度也算进了页面可用高度，导致position: fixed; bottom: 0的元素被挤到可视区域外。切换标签页会触发页面重绘、重新计算视口高度，所以显示会恢复正常。

修复方案 #

方案1：强制触发重绘（优先选择） #

在站点B的页面中加入以下JS代码，页面加载完成后主动触发一次重绘，让浏览器重新计算视口高度：

window.addEventListener('load', () => {
  setTimeout(() => {
    document.body.style.height = '100vh';
    requestAnimationFrame(() => {
      document.body.style.height = '';
    });
  }, 0);
});

搭配CSS适配WebKit内核的视口高度计算规则效果更好：

body {
  min-height: -webkit-fill-available;
}

方案2：fixed元素兜底兼容 #

如果暂时不想修改JS逻辑，可以给页脚元素添加安全区域适配规则，抵消浏览器的计算偏差：

footer {
  position: fixed;
  bottom: 0;
  /* 自动适配设备底部安全区域高度，抵消Chrome的多余视口高度 */
  padding-bottom: env(safe-area-inset-bottom);
}

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