纯CSS视差透视效果仅兼容Firefox，如何适配Chrome与Safari？

问题描述 #

我尝试制作一款背景滚动速度慢于文本内容、营造3D场景错觉的网页，但实现方法仅在Firefox中生效。在Chrome和Safari中，任何transform属性都会抵消background-attachment:fixed的效果，无法呈现预期的视差透视效果。

问题原因 #

• Chrome和Safari严格遵循CSS规范：当元素的祖先节点存在transform、perspective或filter属性（值不为none）时，该元素的background-attachment:fixed会相对于该祖先元素定位，而非视口。这直接导致固定背景的视差逻辑失效，因为背景不再跟随视口滚动。
• Firefox的实现逻辑特殊，它会忽略祖先的transform对fixed背景的定位影响，仍然让背景相对视口固定，因此效果正常。

兼容性优化方案 #

方案1：移除祖先元素的transform属性 #

如果页面布局允许，直接删除包含背景元素的父级或更高层级的transform属性，让background-attachment:fixed恢复相对视口的定位逻辑。这是最直接的修复方式，但可能需要调整其他依赖transform的布局效果。

方案2：使用独立固定背景层 #

创建一个不包含任何transform属性的独立容器作为固定背景，将其置于内容下方：

.fixed-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('你的背景图路径');
  background-size: cover;
  z-index: -1;
}

然后通过JavaScript监听滚动事件，动态调整背景的transform: translateY()值，让背景滚动速度慢于内容，模拟视差效果：

window.addEventListener('scroll', () => {
  const scrollY = window.pageYOffset;
  document.querySelector('.fixed-bg').style.transform = `translateY(${scrollY * 0.5}px)`;
});

方案3：采用纯CSS 3D视差方案（无fixed依赖） #

利用perspective和transform: translateZ()创建3D空间视差，避开background-attachment:fixed的兼容性问题：

.parallax-wrapper {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  background-image: url('你的背景图路径');
  background-size: cover;
  transform: translateZ(-0.5px) scale(1.5);
  transform-origin: top center;
}

.content {
  position: relative;
  transform: translateZ(0);
  padding: 2rem;
}

这种方式在Chrome、Safari、Firefox中均能稳定工作，是现代浏览器视差效果的推荐实现方式。

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