transform会让fixed元素退化为相对祖先定位，这是css规范强制行为而非bug；只要任意祖先设置transform（如translatez(0)）、filter、opacity
transform 会让 fixed 元素退化为 relative 定位
这不是 bug，是 CSS 规范强制行为：只要任意祖先元素设置了 transform（哪怕只是 transform: translateZ(0)），就会创建新的 containing block，position: fixed 就不再相对于视口，而是相对于这个 transform 父级定位。
典型现象包括：顶部导航栏随页面滚动、悬浮按钮卡在轮播图容器里、遮罩层只盖住局部区域。iOS Safari 和微信 WebView 最敏感，Android Chrome 多数正常但旧版 UC/QQ 浏览器也有类似问题。
-
transform: scale(1)、transform: rotate(0)、transform: translateX(0)全部触发失效 - 第三方 UI 库（Ant Design Drawer、Element Plus Dialog、uni-app 的
scroll-view）常悄悄加transform: translateZ(0)做硬件加速，你没写但它写了 -
filter、opacity 、<code>will-change: transform、backdrop-filter有同等效果，别只盯着transform
移动端 fixed 抖动或错位不是性能问题，是锚定逻辑被破坏
iOS Safari 在滚动、软键盘弹出、横竖屏切换时，会主动剥离 fixed 与视口的锚定关系——此时加 will-change: transform 或 translate3d(0,0,0) 不仅无效，还可能加剧错位。
尤其注意：will-change: scroll-position 已被弃用，Safari 完全不支持；transform: translate3d(0,0,0) 在部分安卓 WebView 中会因过度图层创建导致内存飙升。
- 键盘弹出后 fixed 元素“掉下来”，唯一可靠入口是
focusin事件 +setTimeout(() => {}, 0)等待重排完成再读取window.scrollY - 缩放场景下（如 viewport 动态缩放），排查父级
transform没用，要配齐<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 真机测试比模拟器关键：缩放 + 键盘 + 横竖屏三者叠加时，
fixed最容易暴露问题
修复必须动 DOM 结构，不能只改样式
临时加 transform: none !important 只能验证问题，不能当解法——它可能破坏动画、滚动性能或第三方组件逻辑。
真正有效的修复几乎都涉及 DOM 位置调整：
- React 中用
createPortal渲染到document.body下 - Vue 2/3 在
mounted或onMounted里调用document.body.appendChild(el) - 纯 HTML 就手动把
<div class="fixed-btn"> 移到 <code>底部 - 确保样式选择器不依赖原 DOM 层级（比如别用
.modal .fixed-btn，改用独立类名.global-fixed-btn） - 父容器不能有
overflow: hidden或overflow: clip（会截断 sticky 行为） - 需显式设置
top或bottom（如top: 0），且值不能为auto - 不要用
position: absolute + top: 0模拟 fixed —— 它无法响应滚动条变化，也不支持inset等现代特性
优先用 sticky 替代 fixed，而不是硬刚 transform 冲突
如果目标只是“吸顶”或“吸底”，position: sticky 是更现代、更稳定的选择：它天然兼容 iOS 12.2+、Chrome 56+，不受 transform 祖先影响，无抖动、无键盘遮挡、无状态栏重叠问题。
注意两个前提：
