移动端 background-attachment: fixed 失效需改用 CSS 3D 方案：在页面容器设 perspective，子页加 transform-style: preserve-3d，各层用 translateZ 配合 translateX 实现视差，且滚动须由内部容器接管而非 body。
移动端左右滑动页面时 background-attachment: fixed 失效怎么办
在 iOS 和部分 Android WebView 中，background-attachment: fixed 会被忽略或强制降级为 scroll，导致视差背景随内容一起滚动，完全失去“固定视口”的效果。这不是 bug，而是浏览器为性能和触控体验做的主动限制。
所以别再硬套 PC 端写法——移动端必须换思路。核心是：放弃依赖视口固定的背景图，改用 CSS 3D 变换模拟深度分层，靠 perspective + transform: translateZ() 驱动视觉差。
perspective 必须设在滚动容器的父级，不能设在 body 上
很多人把 perspective 直接加在 或 上，结果子元素的 translateZ() 完全没反应。这是因为 perspective 不是全局属性，它只对**直系子元素**生效，且要求子元素设置了 transform-style: preserve-3d。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 给包裹所有页面的容器（比如
<div class="page-container">）设置 <code>perspective: 1000px - 该容器的直接子元素（即每个
<section class="page"></section>）必须有transform-style: preserve-3d - 每个 page 内部的视差层（背景、中景、前景）再分别用
transform: translateZ(-100px)、translateZ(0)、translateZ(50px)控制远近
左右滑动切换时，translateZ 要配合 translateX 动画才自然
单纯用 translateZ 只能产生“缩放感”，没有位移错觉；真正让用户感知到“层次在动”的，是 Z 轴偏移 + X/Y 轴位移的组合。左右滑动场景下，关键在 translateX 的速率差。
示例结构：
.page-container {
perspective: 1200px;
}
.page {
transform-style: preserve-3d;
transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}
.page.active { transform: translateX(0); }
.page.prev { transform: translateX(-100%); }
.page.next { transform: translateX(100%); }
<p>.parallax-bg { transform: translateZ(-200px) translateY(0); }
.parallax-content { transform: translateZ(0) translateY(0); }
.parallax-fore { transform: translateZ(100px) translateY(0); }注意：translateY(0) 是占位写法，实际可结合 window.scrollY 动态微调（如 JS 控制 translateY(scrollY * 0.3)），但左右主切换必须由 translateX 驱动。
iOS Safari 对 will-change 和 -webkit-overflow-scrolling 的隐式影响
在 iOS 上，如果页面容器用了 overflow-x: auto + -webkit-overflow-scrolling: touch 实现惯性滑动，再叠加 transform: translateZ()，容易触发渲染层分裂异常，导致某一层突然消失或闪烁。
规避方式：
- 确保所有参与视差的元素都加
will-change: transform（仅限真正需要动画的层） - 避免在
overflow容器内部嵌套多个transform层；优先把视差逻辑提到外层容器 - 测试时禁用
-webkit-overflow-scrolling: touch，改用touch-action: pan-x+CSS scroll-snap更可控
最易被忽略的一点：iOS 视差效果必须在「非 document.body 滚动」的前提下才能稳定工作——也就是整个页面不能靠 body 自身滚动，而要由一个内部容器接管滚动逻辑，并在其上构建 3D 层级。否则 perspective 就是摆设。
