移动端按钮视差不能用 background-attachment: fixed，因 iOS Safari 从 WebKit 层面禁用该属性；必须用 transform: translateY() 实现，且需设 position、will-change: transform，监听 scroll 时加 { passive: true }，避免重排与主线程阻塞。
移动端按钮视差为什么不能用 background-attachment: fixed
因为 iOS Safari 从 WebKit 层面禁用了 background-attachment: fixed，哪怕你加了 -webkit-background-attachment: fixed 或 transform: translateZ(0)，真机上依然不触发位移。这不是 CSS 写错了，是浏览器主动屏蔽——按钮背景图不会随滚动“固定”，只会跟着父容器一起滚走。
按钮元素做视差必须用 transform: translateY()
按钮本身（<button>）不是背景图，没法靠 background-attachment 控制；它要动，就得直接改自己的 transform。但要注意几个硬约束：
- 按钮需设
position: relative或position: absolute，否则transform可能被忽略或错位 - 必须提前加
will-change: transform，否则 Safari 首帧易撕裂、滚动掉帧 - 别用
top或margin-top：会触发重排，一滑就卡，尤其在低端安卓机上 - 偏移量建议用
window.scrollY * speed计算，speed 取值 0.1～0.7（数值越小越“远”，按钮看起来像浮在背景前）
scroll 事件监听必须带 { passive: true }
iOS 和 Android Chrome 对未声明 passive 的 scroll 监听器会强制同步执行，阻塞主线程，轻则卡顿、重则白屏。错误写法：window.addEventListener('scroll', handler)；正确写法必须是：
window.addEventListener('scroll', handler, { passive: true })如果不加，哪怕逻辑再准，用户滑两下就会明显感知卡顿，甚至按钮位移完全失步。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
按钮视差容易被忽略的三个细节
按钮不像大区块，它的尺寸小、交互频繁，稍不注意就失效：
- 按钮若在
position: sticky容器里，整个视差层会崩塌——iOS Safari 对复合定位叠加极其敏感，建议把按钮抽到独立section中 - 如果按钮是动态插入（比如 Ajax 加载后 append），记得插入后立刻设置
style.willChange = 'transform'，否则首帧不动 - 别在按钮上同时加
transition，哪怕只是transition: all .2s，也会和transform动画冲突，导致晃动或跳变
真正稳定的按钮视差，不是让它“动得快”，而是让它“动得准且不抢主线程”。所有优化都围绕这个点展开，而不是堆参数或套模板。
