根本原因是fixed元素被祖先的transform、opacity等属性连坐进gpu合成层，导致亚像素渲染失效而模糊；修复关键在于清除合成层污染源并强制像素对齐。
fixed定位元素在高性能显示器（如Retina、4K、高DPI屏）下文字模糊，根本原因不是“屏幕太高清”，而是position: fixed元素被意外提升进GPU合成层，导致亚像素渲染失效，文字退化为位图插值——修复关键在于**避免非必要合成层**+**强制像素对齐**，而非调字体平滑。
为什么position: fixed在高DPI屏下必糊？
这不是fixed本身的问题，而是它极易被“连坐”进合成层：只要任意祖先元素存在transform、opacity: 0.99、filter或will-change，浏览器就会把fixed元素锚定到那个父级的合成层里。此时文字不再走主渲染管线，子像素渲染关闭，所有边缘都经双线性插值——尤其在DPR=2/3时，0.5px偏移直接变成1物理像素错位，发虚立刻可见。
- 用Chrome DevTools打开Layers面板，看到文字区域标红且带“Composited”标记，就是它了
-
getComputedStyle(el).transform返回matrix3d中第13/14位含小数？说明坐标已失准 - 同级
position: absolute文字清晰，但fixed糊了？基本锁定是合成层污染
查清并移除合成层污染源
fixed元素没写transform，但照样糊，大概率是父级或更上层悄悄加了触发合成的属性。必须逐层检查Computed值：
- 在Elements面板选中fixed元素，按住Shift连续点右上角箭头，逐层跳转父节点
- 每层切到Computed标签页，搜
transform、opacity、filter、backdrop-filter、will-change - 特别注意第三方组件（如Ant Design弹窗、轮播图wrapper）默认加的
transform: translateZ(0)或will-change: transform - 移动端还要检查
overflow-scrolling: touch——iOS Safari把它等效为transform触发条件
用position: absolute替代fixed时的硬约束
直接换position: absolute是最稳解法，但只改一个声明无效，必须满足三个条件：
- 根容器（如
#app或body）设position: relative+min-height: 100vh（不能只写height: 100vh，键盘弹出时会塌） - 底部固定区域加
width: 100%，防横屏或缩放偏移 - 监听
focusin/blur动态算bottom：用setTimeout(() => { ... }, 0)延迟读取getBoundingClientRect()，再以window.innerHeight - inputRect.bottom计算真实偏移
必须做像素对齐的场景
如果仍需用fixed（比如全屏遮罩、全局通知），那所有参与定位的值必须整数化：
- JS动态控制时：
el.style.top = Math.round(y) + 'px'，别用offsetTop或clientY原始值 - CSS中禁用
top: 50%这类百分比，改用top: calc(50vh - 200px)（确保200px是整数且容器高度稳定） - 动画关键帧里写死
translateY(100px)，而不是translateY(100%)——后者在769px宽容器里算出384.5px，直接糊 - 避免
transform: translate(-50%, -50%)居中，改用left: 50%; top: 50%; margin-left: -200px; margin-top: -32px;
真正难的是定位污染源——很多模糊问题根本不是你写的CSS，而是框架组件或全局样式悄悄加的transform。Layers面板和逐层Computed检查，比反复试-webkit-font-smoothing快十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
