是，scale(1)会让fixed失效；因CSS规范规定transform计算值非none即创建新包含块，使fixed退化为相对该父元素定位，而非视口。
因为 transform: scale() 会让父元素创建新的包含块（containing block），导致子元素的 position: fixed 不再相对于视口，而是退化为相对于该父元素定位——这不是 bug，是 CSS 规范强制行为。
scale(1) 也会让 fixed 失效？
会。只要计算值不是 none，哪怕 scale(1)、rotate(0deg)、translateX(0) 或 translateZ(0)，都触发新包含块。浏览器不看“有没有视觉变化”，只看属性是否被计算为非默认值。
-
transform: scale(1)→ 创建新 containing block →fixed相对于它定位 -
transform: none或未声明 → 安全，fixed仍锚定视口 - 第三方组件（如轮播图、弹窗）内部常自带
scale(1)或translateZ(0)，你没写，但它写了
怎么快速确认是不是 scale 搞的鬼
别翻源码，用 Chrome DevTools 实操：
- 选中失效的
fixed元素，在 Elements 面板按住 Shift 连续点右上角箭头，逐层跳父节点 - 每到一层，切到 Computed 面板，搜
transform，看值是不是none - 重点盯
scale(1)、translateZ(0)这类“无感但致命”的写法 - 顺手搜
filter、opacity、backdrop-filter，它们有同等效果
真正能上线的修复方式只有两种
加 transform: none !important 只能验证问题，不能当解法。生产环境必须选其一：
立即学习“前端免费学习笔记（深入）”；
- 把
fixed元素从带scale的 DOM 树里拎出来，挂到<body>下：React 用createPortal，Vue 用Teleport，纯 JS 用document.body.append(el) - 保持 DOM 位置不变时，优先换
position: sticky：比如top: 0或bottom: 0，现代浏览器支持良好，且完全不受scale干扰 - 慎用
position: absolute+ JS 监听 scroll：滚动抖动、软键盘弹出时坐标错乱、性能开销大，只在极特殊场景兜底
最易被忽略的是：iOS Safari 和部分 Android WebView 中，scale 引发的 fixed 失效往往和缩放、横屏、软键盘三者叠加才彻底暴露——真机测试时，别只点开 DevTools 看 computed，要实际缩放+唤起键盘+旋转屏幕再看。
