background-attachment: fixed 在移动端基本无效，是浏览器为保障滚动性能主动禁用，chrome自v56、safari更早起默认降级为scroll；推荐用background-position+scroll事件模拟或scroll-driven animations替代。
background-attachment: fixed 在移动端基本无效，不是你写错了，是浏览器主动禁用 —— 桌面端能跑不等于能上线，生产环境必须 fallback。
为什么 background-attachment: fixed 在手机上没反应
Chrome 自 v56、Safari 更早起就默认把 background-attachment: fixed 降级为 scroll。这不是 bug，是浏览器权衡性能后的主动限制：固定背景需持续合成新图层，对移动 GPU 和内存压力太大。iOS 15+ 起，连 transform: translateZ(0) 都救不回来；安卓 WebView 同样静默忽略。
常见错误现象：
- DevTools 里样式面板显示
background-attachment: fixed，但 computed 值却是scroll - 桌面预览正常，真机一滑，背景跟着内容一起滚
- 父容器加了
overflow: hidden或filter: blur(1px)，fixed 直接失效或裁剪
哪些场景下它还能勉强用
仅限桌面端、且满足严格前提时可保留作为兜底：
- 背景必须设在
body或全屏级容器（如.hero），不能嵌套在带transform/will-change的父元素里 - 配套必须写全：
background-size: cover、background-position: center、background-repeat: no-repeat - 用媒体查询隔离：
@media (hover: hover) and (pointer: fine) { .parallax { background-attachment: fixed; } }
真正跨端可用的替代方案
别卡在“fixed 能不能修”，直接换路子：
-
background-position + scroll：监听window.scrollY，用requestAnimationFrame动态更新background-position，比例控制在0.2～0.6之间（例如'center ' + (scrollY * 0.4) + 'px'） -
position: sticky最小可行方案：给背景容器设position: sticky; top: -50vh; height: 200vh;，不依赖 JS，但需注意height必须显式设置，且不能和transform同时作用 -
scroll-timeline（现代首选）：Chrome 115+、Safari 17.4+ 支持，写法如animation: parallax 1s linear both; animation-timeline: scroll(root);，但必须检查兼容性：CSS.supports('animation-timeline', 'scroll()')，不支持时 fallback 到 JS 方案
最容易被忽略的细节
所谓“视差平滑”，本质是位移与滚动距离严格线性映射 —— background-attachment: fixed 天生做不到这点，它只是冻结背景，没有中间帧，也不响应滚速变化。真要交付，得从滚动事件源开始对齐，而不是盯着一个 CSS 属性反复调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
