Firefox显示固定背景、Chrome显示滚动背景的兼容性问题求助

Chrome在处理background-attachment: fixed与background-size: cover的组合时，常因渲染机制差异出现背景缩放异常、随页面滚动的问题，以下是几种高效修复方案：

方案1：使用伪元素创建独立背景层 #

这是最稳定的修复方式，将背景从目标元素剥离为独立的全屏固定层，避免浏览器渲染冲突：

/* 父容器设置相对定位，作为伪元素参照 */
.portfolio-item-container {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* 生成全屏固定背景 */
.portfolio-item-container::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("你的背景图片URL");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -1;
}

该方案确保背景始终以视口为基准缩放，Chrome与Firefox表现一致，且天然支持响应式适配。

方案2：排查并移除堆叠上下文干扰属性 #

若目标元素或其父元素存在transform、filter、perspective等属性，会创建新的堆叠上下文，导致Chrome中background-attachment: fixed失效。检查并移除这类属性：

.portfolio-item-container {
  /* 移除 transform/filter 等干扰属性 */
  /* transform: translateY(0); */
  /* filter: opacity(0.9); */
}

方案3：直接在根元素设置背景 #

避免在嵌套元素中使用固定背景，改为在html/body上设置，让Chrome直接基于视口计算背景尺寸：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: url("你的背景图片URL");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

修复后使用Ctrl+Shift+R硬刷新Chrome清除缓存，测试不同屏幕尺寸确认响应式效果。

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