如何让纯CSS视差(parallax)代码在复杂站点中正常生效？

问题原因 #

该现象属于CSS 3D变换规范的标准行为：
当元素同时设置了overflow: hidden和transform-style: preserve-3d时，浏览器为了实现内容裁剪，必须将该元素下所有子元素（包括伪元素）的3D变换结果先扁平化渲染到当前元素的2D平面上，再执行裁剪操作。这个过程会直接抵消你给.latest_news_section::before设置的translateZ(-5px)Z轴偏移效果，导致视差滚动失效。
你同事运行代码效果正常，是浏览器版本差异导致的：部分旧版本浏览器没有严格遵循该规范的实现，允许overflow: hidden和preserve-3d共存，所以能正常显示视差效果。

解决方案 #

根据你的业务需求可选择任意一种方案改造：

1. 如果你不需要裁剪.latest_news_section的溢出内容，直接移除该元素的overflow: hidden属性即可，这是成本最低的方案
2. 如果你确实需要裁剪该区块的溢出内容，可新增一层外层容器专门负责裁剪，避免裁剪操作影响3D空间：

调整后的DOM结构 #

<div class="latest_news_clip">
  <div class="latest_news_section">
    <!-- 原有区块内容保持不变 -->
    <h1 class=".latest_news_section_header">
      THE LATEST NEWS ON DESIGN & ARCHITECTURE
    </h1>
    <div class="heading-buttons container">
      <button class="green">Subscribe Now</button>
      <button class="blue">Best Articles</button>
    </div>
  </div>
</div>

调整后的CSS代码 #

/* 新增裁剪容器样式 */
.latest_news_clip {
  height: 390px;
  overflow: hidden;
}
.latest_news_section {
  /* 原有属性保留，修改以下两个属性即可 */
  height: 100%;
  overflow: initial;
}

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