transform非none会强制创建新包含块，使fixed定位退化为相对祖先元素；同效属性包括filter、opacity<1等；修复需用Portal/Teleport移出容器或改用sticky。
因为 transform 非 none 会强制创建新包含块，使子元素的 position: fixed 失去对视口的锚定能力——这不是 bug，是 CSS 规范明确要求的行为。
为什么 transform 会让 fixed “降级”为 relative 定位
只要任意祖先元素的 transform 计算值不为 none（哪怕只是 translateZ(0)、scale(1) 或 rotate(0deg)），它就创建一个新的包含块（containing block）。而 position: fixed 的定位基准必须是“初始包含块”（即视口），一旦这个基准被覆盖，fixed 就自动退化为相对该祖先定位，视觉上等同于 position: absolute。
同效属性还包括：filter（哪怕 blur(0)）、opacity 小于 1、backdrop-filter、will-change: transform，甚至 iOS Safari 中的 overflow-scrolling: touch。
- 第三方组件库（如 Ant Design 的
Drawer、Element Plus 的el-dialog）常默认加transform: translateX()，你没写，但它写了 -
transform: translateZ(0)是最隐蔽的诱因：无视觉变化，但已生效 - Chrome DevTools 的 Layers 面板能直观看到哪些元素成了新合成层，间接暴露包含块变更
怎么快速定位是哪个父级在破坏 fixed
别靠猜 DOM 结构。用 Chrome DevTools 直接查最终计算值：
立即学习“前端免费学习笔记（深入）”；
- 选中失效的
fixed元素 → 在 Elements 面板按住 Shift 并连续点击右上角箭头，逐层向上跳转父节点 - 每到一层，切到 Computed 标签页，搜索
transform，看值是否为none - 顺手搜
filter、opacity、backdrop-filter、will-change—— 它们有同等破坏力 - 特别注意
html或body上是否被框架/脚本悄悄加了transform（比如全局缩放方案）
修复 fixed 动画失效的实操路径
临时加 transform: none !important 能验证问题，但不能上线。生产环境必须选以下之一：
- 把
fixed元素从带transform的容器里拎出来，挂到<body>下：React用createPortal，Vue用<teleport to="body">，纯 JS 用document.body.append(el) - 保持 DOM 位置不变时，优先换
position: sticky：比如top: 0或bottom: 0，现代浏览器支持良好，且完全不受transform干扰 - 慎用
position: absolute+ JS 监听scroll和resize手动更新坐标——滚动抖动、软键盘弹出时坐标错乱、性能开销大，仅限极特殊场景兜底
移动端和动画性能的隐藏陷阱
即使修复了定位基准，动画仍可能卡顿或错位：
- 滚动时频繁读写
top/left会强制触发重排，哪怕只是0.1px变化也会打断 GPU 合成 - iOS Safari 在缩放 + 横屏 + 软键盘三者叠加时，
fixed最容易暴露问题；此时sticky更稳 -
will-change: transform对 fixed 动画基本无效，DevTools 会报will-change: transform is deprecated for non-transforming elements - 真机测试不可替代：模拟器无法复现软键盘唤起后视口重算、地址栏收放导致的锚点偏移
真正难的不是找到哪个父级加了 transform，而是判断它是不是框架注入、脚本动态添加、还是 polyfill 带来的副作用——这些往往只在特定设备或交互路径下才浮现。
