position: fixed在移动端失效主因是祖先元素设置transform（如translateZ(0)、scale(1)、rotate(0)）、filter、opacity
因为 transform（哪怕只是 translateZ(0)）会强制创建新包含块，使 position: fixed 退化为相对该祖先定位——这不是 bug，是 CSS 规范在移动端（尤其是 iOS Safari 和 Android WebView）中更严格、更易触发的强制行为。
哪些 transform 值会在移动端悄悄“搞破坏”
只要计算值不为 none，就足以触发包含块变更。移动端尤其敏感，以下写法全都会让 fixed 失效：
-
transform: translateZ(0)（最常见，常被当作“开启硬件加速”的万能写法） -
transform: scale(1)、transform: rotate(0)、transform: translateX(0) -
will-change: transform（单独存在时不一定触发，但和动画/滚动共存时极易生效） -
filter: blur(0)、backdrop-filter: blur(2px)、opacity: 0.99 - iOS Safari 中的
overflow-scrolling: touch（等效于隐式创建合成层）
为什么真机上才暴露？模拟器查不到问题
移动端浏览器（尤其是 iOS WebKit）对视口锚定逻辑更激进：缩放 + 横屏 + 软键盘三者叠加时，会临时剥离 fixed 与视口的绑定关系。此时即使 DOM 结构没问题，也会视觉错位。
- Chrome DevTools 的 Layers 面板里，
fixed元素若没单独成层，反而更安全；若被裹进父级合成层，则大概率失效 - iOS Safari 开发者工具会直接标出「Fixed position containing block」，一眼锁定“罪魁祸首”
- Android WebView 中，
fixed和overflow: scroll容器嵌套时，容易出现滚动后白块、按钮残留——这是 GPU 纹理缓存错乱，不是样式写错了
修复必须动 DOM 或换定位方式，不能只改 CSS
加 transform: none !important 只能验证问题，上线会破坏动画、滚动性能或第三方组件行为。
立即学习“前端免费学习笔记（深入）”；
- 把
fixed元素移出所有干扰容器，用document.body.append(el)直接挂到下；React 用createPortal，Vue 用Teleport - 确保样式不依赖原层级，比如把
.modal .back-to-top改成.global-back-to-top，并显式设z-index: 2147483647 - 优先用
position: sticky替代：如top: 0或bottom: 0，它完全不受transform影响，且现代移动端支持良好 - 慎用 JS 模拟
fixed：监听scroll手动设top/left，软键盘弹出时坐标极易错乱，且滚动抖动明显
真正麻烦的不是自己写的 transform，而是别人代码里的——比如微前端主应用给 #app 加了 transform: scale()，子应用里一个 fixed 按钮就跟着飘走；又或者 Ant Design 的 Drawer 内部默认用了 transform: translateX()，你根本没写，但它写了。
