iOS Safari：如何修改超出<body>范围的刷新/底部区域页眉页脚背景色

iOS Safari的弹性滚动（bounce scroll）和页面刷新时的顶部闪现白色背景，本质是浏览器默认的滚动区域背景暴露导致的。以下是几种实用的解决方法，和CNN这类站点的实现思路一致：

1. 结合viewport-fit=cover与全局背景延伸 #

首先调整视口设置，让页面内容完全覆盖浏览器视口，再把背景设置到根元素并确保继承：

• 先更新meta视口标签：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  

• 再设置CSS：

  html {
    height: 100%;
    background: #000;
    overflow-x: hidden;
  }
  body {
    min-height: 100%;
    background: inherit;
    margin: 0;
  }
  

这种方式让背景延伸到浏览器的滚动区域，即使触发弹性滚动，露出的也是站点自定义背景。

2. 把滚动限制在内部容器（禁用浏览器级弹性滚动） #

如果业务允许，可以将滚动行为限制在页面内容容器内，避免触发浏览器的弹性滚动：

.page-container {
  height: 100vh;
  overflow: hidden;
}
.content-wrap {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* 保留iOS平滑滚动体验 */
  background: #000;
}

布局时将所有内容放到.content-wrap里，这样滚动只会在容器内触发，不会露出浏览器的白色背景。

3. 添加全屏固定兜底背景层 #

新增一个全屏固定定位的元素作为背景兜底，z-index设为最低，确保浏览器滚动区域露出时显示的是自定义背景：

.bg-fallback {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: -1;
}

然后在<body>内添加该元素：

<div class="bg-fallback"></div>

4. 修复刷新时的顶部闪现 #

如果刷新时仍有白色闪现，可在<head>中添加一段即时生效的JS，确保页面加载初期就设置好背景：

document.documentElement.style.background = '#000';

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