移动端快速滚动时背景图上移导致底部出现多余空白问题求助

问题根源 #

• 你当前使用的background-attachment: fixed在移动端WebKit内核浏览器存在原生兼容bug，背景不会正确绑定到视口，滚动时会随页面偏移，停止滚动触发重绘后才复位，就会出现你观测到的上移、底部出空白、停止后恢复的现象。
• 移动端浏览器滚动时地址栏收缩/展开会动态修改视口高度，fixed背景的位置计算会滞后于视口高度变化，进一步放大了空白问题。

修复方案 #

首先删除你原来写在html选择器中的所有背景相关代码，改用固定定位伪元素实现全屏背景，这是目前移动端兼容性最好的实现方式：
首先统一重置全局默认边距，避免默认样式干扰：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

然后添加背景相关样式：

html, body {
  /* 降级兼容不支持动态视口单位的旧浏览器 */
  min-height: 100vh;
  /* 动态视口单位，完美适配移动端地址栏变化后的视口高度 */
  min-height: 100dvh;
  overflow-x: hidden;
}

/* 用伪元素单独做固定背景层，避开background-attachment的兼容坑 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(bg.jpg) no-repeat center center;
  background-size: cover;
  z-index: -1;
  /* 提前开启硬件加速，避免滚动时出现抖动 */
  will-change: transform;
}

可选优化 #

如果你的页面存在滚动到边界时的系统回弹效果，可以给html标签添加如下属性，避免回弹带动背景偏移：

html {
  overscroll-behavior-y: contain;
}

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