ios上background-attachment: fixed失效是因safari限制，需加-webkit前缀、避免父容器transform等干扰，并用伪元素+固定高度+图片加载完成方可生效。
background-attachment: fixed 为什么在 iOS 上不生效
这不是代码写错了，是 Safari 主动限制：iOS 15 及更早版本默认禁用 background-attachment: fixed，真机上表现等同于 scroll。哪怕加了 transform: translateZ(0)，也大概率无效。
必须显式声明 -webkit-background-attachment: fixed，仅靠标准写法不够；若父容器有 transform、filter 或 will-change，会触发新层叠上下文，直接让 fixed 失效。
- 检查 DOM 结构，别只看目标元素样式——上层容器是否带
overflow: hidden或position: sticky？这些都会裁剪或干扰 fixed 行为 - 安卓旧版 WebView（如 UC）也不支持，得准备 JS 降级方案
- 首次加载时背景图未就绪，
fixed会先显示空白或错位，需配合img.onload或IntersectionObserver延迟启用
纯 CSS 实现视差的硬性前提条件
background-attachment: fixed 只对有明确渲染尺寸的块级元素起作用。height: auto 或依赖内容撑开的容器，该属性就是摆设。
- 容器必须设固定高度，推荐
height: 100vh（不是min-height） - 必须配齐
background-size: cover和background-position: center，否则图会拉伸或偏移 - 避免在该容器内使用
overflow: hidden，否则边缘可能被意外裁切 - 背景图分辨率建议 ≥ 1920×1080px，缩放时才不易糊
移动端 fallback 到 JS 方案的关键写法
当 background-attachment: fixed 不可用时，用 transform: translateY() 模拟是唯一可靠路径，但不能直接在 scroll 事件里改样式——会掉帧、粘滞，iOS 上尤其明显。
- 监听
scroll时只缓存window.scrollY，用requestAnimationFrame统一更新位移 - 背景层偏移量 =
-scrollY * 0.3，系数越小“越远”，别用整数（如1）否则失去视差感 - 必须给元素加
will-change: transform（仅对该元素），否则 Chrome 会降级到 CPU 渲染 - 移动端要额外监听
touchmove并调用event.preventDefault()，否则 iOS Safari 不更新scrollY
伪元素方案比直接设 background 更可靠
直接给区块设 background-attachment: fixed 容易被父容器干扰；用 ::before 或 ::after 伪元素承载背景，能绕过多数层叠上下文问题。
示例结构：
.parallax-section { height: 100vh; position: relative; }
.parallax-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
z-index: -1;
}
注意：position: absolute 比 sticky 更稳妥；z-index: -1 确保背景在内容之下；父容器 position: relative 是锚点前提。
真正容易被忽略的是：伪元素方案仍需满足高度明确、无干扰属性、图片加载完成这三点，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
