filter触发重绘卡顿因逐像素合成需全量光栅化，不改布局但绕过绘制管线；Firefox默认不自动创建合成层，Chrome常默认提升，导致跨浏览器帧率差异大。
filter 触发重绘时为什么布局没动但页面卡顿？
因为 filter 是逐像素合成操作，浏览器必须把元素及其后代全部光栅化、模糊、再叠加——这个过程不改变盒模型尺寸，但会绕过常规绘制管线。Firefox 默认不为 filter 自动创建合成层，Chrome 却常默认提升，导致同一段代码在两浏览器中帧率差异极大。
常见现象：hover 时加 filter: blur(2px)，Chrome 流畅，Firefox 掉帧严重；滚动区域里用 filter: brightness(0.8)，低端安卓 WebView 直接卡死。
- 避免在高频触发场景（如
scroll、mousemove、hover）中直接写死filter值，改用 class 切换 +will-change按需提示 - 只在真正需要动画的元素上设置
will-change: filter，且必须在交互开始时动态添加、结束时立刻移除（不能靠 CSS 写死） - 对静态内容，优先用预渲染图替代：比如模糊背景图，直接切一张
bg-blurred.jpg，比实时filter: blur(4px)省 90% GPU 资源
Firefox 下 filter 动画掉帧的硬性修复点
Firefox 不像 Chrome 那样“宽容”：它不会因你写了 transition: filter 0.3s 就自动新建图层。你得明确告诉它“这里要合成”，否则所有帧都在主线程做像素计算。
错误写法：.card { transition: filter 0.3s; } → Firefox 每帧都重绘整个卡片区域
立即学习“前端免费学习笔记（深入）”；
正确做法是手动触发合成层，但仅限必要元素：
- 加
transform: translateZ(0)或transform: scale(1)，强制新建图层（注意：不要全站滥用，会增加内存开销） - 若已用
position: fixed或z-index，则无需额外加 transform —— 这些本身就会创建层叠上下文 - 绝对不要同时给同一元素加
filter和opacity动画，Firefox 会反复重绘两次，抖动明显
blur() 在 Safari 9–12 和旧 Chrome 中完全不生效？不是 bug 是引擎限制
iOS Safari 9–12 和 Chrome 18–52 的 WebKit/Blink 引擎压根没启用 CSS Filter Layout 特性，filter: blur(2px) 这种声明会被直接忽略，连解析都不走。
Autoprefixer 对 filter 完全不处理，SCSS Mixin 也得手动拼前缀——而且顺序不能错：
- 必须写成
-webkit-filter: blur(2px); filter: blur(2px);，反着写新版 Chrome 可能跳过标准属性 -
@supports (filter: blur(0))在旧 Safari 里会误报支持，检测必须用 JS：window.CSS && CSS.supports('filter', 'blur(0)') - drop-shadow() 的
blur值只认px，写成em或省略单位，整条声明失效
IE/Edge 12–15 完全不支持 filter，别试 polyfill
这些浏览器把 filter 当作无效 CSS，连 -webkit-filter 都不识别。CSS-Filters-Polyfill 这类方案只能转成 SVG 滤镜，但不支持动画、性能极差，且对 backdrop-filter 无解。
务实做法是降级而非模拟：
- 灰度图 → 直接用导出好的灰度 PNG，别依赖
filter: grayscale(1) - 模糊效果 → 后台预生成带模糊的图，或用
background: url("fallback-blur.png") - 动态场景（如用户上传后实时模糊）→ 用 Canvas：
ctx.filter = "blur(2px)"（仅 Chrome/Firefox 支持），fallback 到opacity: 0.97; transform: scale(1.01)模拟轻微虚化
最易被忽略的一点：滤镜生效的前提是“背后有内容可滤”。如果 backdrop-filter 用在纯白背景的弹窗上，或者 filter 加在空 div 上，那不管怎么调参数，都看不到效果——不是兼容问题，是逻辑前提不成立。
