如何修复Chrome Android中滚动时背景图片闪烁及溢出视口问题

问题原因 #

Chrome移动端浏览器对background-attachment: fixed与background-size: cover的组合存在渲染bug，滚动过程中会错误计算视口尺寸，导致背景图出现缩放、溢出视口的异常。

解决方案 #

方案1：使用伪元素替代body固定背景（推荐）

通过固定定位的伪元素承载背景，直接基于视口尺寸渲染，规避body固定背景的计算问题：

body {
  position: relative;
  overflow-x: hidden;
  margin: 0;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('imgurl');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left;
  z-index: -1;
}

方案2：禁用Chrome滚动锚定优化

如果仍想保留body的固定背景写法，可尝试关闭Chrome的滚动锚定功能，缓解渲染异常：

body {
  background-image: url('imgurl');
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: left;
  overflow-anchor: none;
}

方案3：降级为滚动背景（非必须固定时）

若业务场景允许背景随页面滚动，直接移除background-attachment: fixed即可：

body {
  background-image: url('imgurl');
  background-size: cover;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position: left;
}

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