firefox 中 filter 不生效主因是冗余 -webkit-filter 触发严格解析冲突，应仅用标准 filter；svg 滤镜需内联定义；动画需避免同时操作 filter 和 opacity，并谨慎使用合成优化。
filter 在 Firefox 中不生效？大概率不是浏览器不支持，而是写法触发了它的严格解析机制。
Firefox 不认 -webkit-filter，删掉就对了
Firefox 从 35 版本起原生支持标准 filter，根本不需要 -webkit-filter。加了反而坏事：当两者共存时，某些旧版 Safari 会优先匹配前缀版，而 Chrome/Firefox 可能因解析冲突忽略标准属性。
- 错误写法：
filter: blur(2px); -webkit-filter: blur(2px);→ Firefox 实际可能跳过filter - 正确写法：
filter: blur(2px);（仅此一行） - 兼容 IE？别费劲——IE 完全不支持
filter，用@supports (filter: blur(1px))做特性检测更靠谱
SVG 滤镜在 Firefox 里必须内联
用 filter: url(#myblur) 时，Firefox 要求 <filter></filter> 必须在当前 HTML 文档内可访问，不能靠外部 SVG 文件或跨 iframe 引入——哪怕同源也不行。
- ✅ 正确：把
<svg><defs><filter id="myblur">...</filter></defs></svg>放在顶部 - ❌ 错误：
filter: url(/assets/filters.svg#myblur)或filter: url(iframe-id#myblur) - 复用需求强？用
<object type="image/svg+xml" data="filters.svg"></object>加载，再用 JS 把其中的<filter></filter>提取并注入 DOM
动画卡顿别只怪 Firefox，它和 Chrome 渲染策略不同
transition: filter 0.3s 在 Chrome 和 Firefox 中走的是完全不同的渲染管线：Chrome 默认提升为合成层，Firefox 默认不提升——这不是 bug，是设计选择。
- Chrome 下高频 hover 模糊，加
will-change: filter有帮助，但务必只在 hover 触发时设置，离开时移除 - Firefox 下掉帧？可尝试
transform: translateZ(0)强制新建图层，但仅限必要场景，避免滥用 - 绝对不要同时动画
filter和opacity——两者都触发合成，在 Firefox 中极易引发重绘抖动
filter 的要求更接近规范本意：不接受冗余前缀、不妥协作用域、不自动优化合成——这些恰恰是调试时最容易被忽略的硬约束。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
