纯CSS视差效果Firefox正常但Chrome失效，求技术解决方案

问题描述 #

纯CSS实现的视差效果在Firefox 122.0.1中表现正常：背景图会缩放，滚动时能呈现预期的视差效果；但在Chrome 121.0.6167.139中完全失效，背景图不缩放，滚动也无任何视差反应。

原因分析 #

Chrome与Firefox对3D变换上下文的处理存在差异：

• 当父容器设置overflow: auto时，Chrome无法正确将3D空间上下文传递给伪元素
• 伪元素未设置明确的定位方式，导致3D变换无法在正确的空间内生效

修复方案 #

针对Chrome的特性，调整以下CSS规则：

• 给.parallax-container添加position: relative，明确伪元素的定位基准
• 给.parallax-container::after设置position: absolute; top: 0; left: 0; width: 100%;，确保伪元素占满容器空间，缩放后能覆盖视口
• 移除#window *上的transform-style: preserve-3d强制继承，避免上下文冲突，仅在必要元素上保留该属性

修改后的完整代码示例 #

HTML代码 #

<!DOCTYPE html>
<html>
  <body>
    <div id="window">
        <div class="parallax-container" id="image1">
            <div class="parallax-content">
                <div class="fixed-content">
                    <h1 class="section-title">BIG HEADLINE</h1>
                    <a href="#" class="section-btn">BUTTON</a>
                </div>
                <a href="#section2" class="section-ang">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 8L12 16L20 8" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                </a>
            </div>
        </div>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
  </body>
</html>

CSS代码 #

:root {
    --perspective: 2px;
    --speed-factor: 3.0;
    --parallax-z-index: calc(-1.0 * var(--speed-factor) * var(--perspective));
    --scale-factor: 4;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    max-width: 1200px;
    padding-left: 20px;
    padding-right: 20px;
    margin: auto;
}

.container-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.container-title {
    font-size: 22px;
    font-weight: 400;
    font-style: normal;
    color: #494c50;
    letter-spacing: 6px;
    margin-bottom: 25px;
}

.section-title {
    max-width: 880px;
    margin-bottom: 15px;
    text-align: center;
    font-size: 55px;
    font-weight: 400;
    font-style: normal;
    line-height: 60px;
    text-shadow: 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .3);
    color: #fff;
}

.section-btn {
    display: inline-block;
    text-decoration: none;
    padding: 10px 40px;
    background-color: #b2ae92;
    color: #333;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    border-radius: 3px;
    transition: all 0.2s;
}

.section-ang {
    position: absolute;
    bottom: 50px;
    margin: auto;
}

.section-ang:hover svg path {
    stroke: #999;
}

.parallax-container {
    height: 500px;
    width: 100%;
}

#window {
    width: 100vw;
    height: 100vh;
    perspective: var(--perspective);
    overflow-x: hidden;
    overflow-y: auto;
    transform-style: preserve-3d;
}

.parallax-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative; /* 添加相对定位 */
    transform-style: preserve-3d; /* 保留3D上下文 */
}

.section-content {
    background: #fff;
}

.parallax-container::after {
    content: "";
    display: block;
    position: absolute; /* 添加绝对定位 */
    top: 0;
    left: 0;
    width: 100%; /* 宽度设为100% */
    height: 100vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform-origin: center;
    transform: translateZ(var(--parallax-z-index)) scale(var(--scale-factor));
}

#image1::after {
    background-image: url("https://images.unsplash.com/photo-1705768199489-193d858e61be?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDc3MDc3Mjd8&ixlib=rb-4.0.3&q=85");
}

.fixed-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.parallax-content {
    position: absolute;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

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