纯 css 的 background-attachment: fixed 在 ios safari 上无效，必须用 javascript 驱动 transform + requestanimationframe 实现跨端一致视差；需设 passive: true 监听 scroll、合理管理 z-index 与合成层。
纯 CSS 的 background-attachment: fixed 在 iOS Safari 上基本无效，别指望它在真机上动起来；真正可控、跨端一致的视差排版，必须用 JavaScript 驱动 transform: translateY()，并配合 requestAnimationFrame 节流。
background-attachment: fixed 为什么在移动端不工作
这不是你代码写错了，是 WebKit（iOS Safari）主动禁用了该行为——即使加了 -webkit-background-attachment: fixed 和 transform: translateZ(0)，多数真机仍无反应。它只在桌面 Chrome/Firefox 中稳定，且要求父容器有明确高度（如 height: 100vh），不能嵌套在 position: sticky 或 transform 父级里。
常见错误现象：background-attachment: fixed 写对了，但滚动时背景完全不动；或者只在首次加载闪一下，之后卡死。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须设
min-height: 100vh（不能用height: auto） - 禁止在
overflow: hidden容器内使用 - 避免与
position: sticky元素共存，否则整个层叠上下文崩塌
用 requestAnimationFrame + transform 实现平滑视差
核心不是“怎么算”，而是“怎么不卡”。直接在 scroll 回调里改 style.transform 会触发高频重绘，低端安卓和 iOS 尤其掉帧。正确做法是把滚动值缓存下来，用 requestAnimationFrame 统一在下一帧更新所有视差层。
- 给每个视差元素加
data-speed="0.2"（背景层）或data-speed="0.8"（前景层），系数越小越“远” - 用
window.scrollY乘以speed得位移量：element.style.transform = `translateY(${ -scrollY * speed }px)` - 务必提前设置
will-change: transform或transform: translateZ(0)，否则首帧易撕裂 - 元素需有
position: relative或position: absolute，否则transform可能不生效
移动端 scroll 事件监听必须加 passive: true
iOS 和 Android Chrome 对未声明 passive 的 scroll 监听器会强制同步执行，阻塞滚动主线程，导致严重卡顿甚至白屏。不加这个配置，视差再准也撑不过三秒滑动。
- 错误写法：
window.addEventListener('scroll', handleScroll) - 正确写法：
window.addEventListener('scroll', handleScroll, { passive: true }) - 如果需要在回调中调用
event.preventDefault()（比如自定义滚动阻尼），则不能设passive: true，此时应改用IntersectionObserver做轻量触发
真正容易被忽略的点是：视差层的 z-index 和文档流位置必须显式管理。一旦某个视差元素被 transform 或 opacity 触发了合成层，又没配好 z-index，就可能被 sticky 导航盖住，或在 Safari 中突然消失——这跟动画逻辑无关，纯粹是层叠上下文断裂造成的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
