旧版chrome/safari不解析filter声明，因chrome 18–52和safari 6–9默认禁用css filter layout特性，filter会被直接跳过；必须同时写-webkit-filter和filter，检测须用javascript而非@supports，blur()等函数易被整条丢弃，ie/edge 12–15则完全无视filter。
旧版Chrome/Safari不解析filter声明
Chrome 18–52 和 Safari 6–9 默认禁用 CSS Filter Layout 特性，filter 属性会被浏览器当作无效声明直接跳过，连 -webkit-filter 前缀也未必生效。这不是语法错误，而是渲染引擎根本没加载滤镜管线。
- 必须同时写前缀和标准属性：
-webkit-filter: blur(2px); filter: blur(2px);，只写前缀新版浏览器可能忽略 -
@supports (filter: blur(0))在旧 Safari 中会误报支持，检测必须用 JavaScript：window.CSS && CSS.supports('filter', 'blur(0)') - blur()、drop-shadow() 这类函数最容易被整条丢弃，灰度或亮度等基础函数相对更稳定
IE 和 Edge 12–15 完全无视filter
IE 全系（含 IE11）和 Edge 12–15 把 filter 当作未知属性，既不解析也不降级，CSS 规则块直接失效。polyfill（如 css-filters-polyfill）只能模拟部分效果，且对 blur() 支持极差。
- 不能依赖样式 fallback，得换实现方式：用内联 SVG 滤镜替代，或用 Canvas 动态合成图像
- IE 的私有
filter（如progid:DXImageTransform.Microsoft.Blur）和现代filter完全不兼容，混用会导致解析失败 - Instagram.css 类库在 IE 中必须配合条件注释引入 polyfill，且仅对 grayscale/contrast 等简单效果有效
Firefox 70–102 需手动开启backdrop-filter
backdrop-filter 在 Firefox 70–102 是实验特性，默认关闭。用户看不到效果不是代码问题，而是 layout.css.backdrop-filter.enabled 这个 about:config 开关处于 false。
- 运行时检测必须用
CSS.supports('backdrop-filter', 'blur(1px)')，@supports在旧版 Firefox 中会整块跳过规则 - 降级样式（如半透明背景）必须写在
@supports外部，否则旧版连 fallback 都收不到 - 元素必须有 alpha 背景（
rgba(255,255,255,0.1)），transparent或rgba(0,0,0,0)会让 Firefox 直接跳过取样
blur() 单位缺失或顺序错乱导致静默失效
filter: blur(2) 在所有浏览器里都无效——blur() 只接受带单位的长度值，无单位数字被解析为非法值，DevTools 里该行会被划掉，但页面不会报错。
- 必须写
blur(2px)或blur(0.5em)，blur(0)合法但不“清除”其他 filter 效果 - 多个函数串联时顺序不可逆：
grayscale(1) saturate(2)和saturate(2) grayscale(1)渲染结果不同，后者才可能保留细微色调 - fixed 定位元素加
filter易致边缘撕裂，尤其在 Safari 和 Chrome 滚动时，是因为合成层与视口不同步
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
