Chrome浏览器中background-attachment属性渲染问题修复方案

我之前在Retina屏的Mac上用Chrome开发时也遇到过一模一样的问题，这本质是Chrome在高DPI屏幕下，处理background-attachment: fixed结合带overflow-y: auto的滚动容器时的渲染bug——浏览器没有正确适配Retina的2x像素密度，导致背景出现偏移、拉伸或者断裂的异常。

最可靠的解决方案：用伪元素模拟固定背景 #

放弃在滚动容器内的元素上使用background-attachment: fixed，转而给滚动容器添加一个固定在视口的伪元素背景，这样能彻底规避Chrome的渲染问题：

body {
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
}

#cards {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  position: relative; /* 为伪元素提供定位上下文 */
}

/* 新增伪元素作为固定背景 */
#cards::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url(你的图片地址); /* 替换成实际图片URL */
  background-size: cover;
  background-position: center;
  z-index: -1; /* 确保背景在内容下方 */
}

.card-wrapper {
  width: 100%;
  height: 100%;
  /* 移除原有的background相关属性 */
}

这个方法的核心是把背景直接绑定到视口，而非滚动容器内的元素，Chrome能正确处理Retina屏的像素缩放，滚动时背景也会保持固定不动。

临时修复方案：触发GPU加速 #

如果不想修改结构，可以尝试给.card-wrapper添加硬件加速属性，有时候能强制Chrome正确渲染：

.card-wrapper {
  width: 100%;
  height: 100%;
  background: url(你的图片地址);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  transform: translateZ(0); /* 触发GPU加速，修复渲染异常 */
}

不过这个方法的稳定性不如伪元素方案，不同Chrome版本的兼容性可能有差异，建议优先用第一种方法。

修改后记得在Retina Mac的Chrome里测试滚动效果，确认背景渲染正常即可。

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