iOS Safari 9–12 仅支持 -webkit-filter，需并列声明且顺序不可颠倒；Autoprefixer 不处理该属性；@supports 检测不可靠，须用 JS 检测；SCSS Mixin 需手动拼接滤镜函数；IE/Edge 不支持 filter，需降级方案；backdrop-filter 依赖透明背景、stacking context 和 WebView 兼容性。
为什么直接写 filter 在 iOS Safari 9–12 里不生效
不是语法错，也不是漏了单位——是这些版本的 WebKit 渲染引擎只认 -webkit-filter，且不会自动 fallback 到标准属性。Autoprefixer 对 filter 的前缀补全完全失效，它压根不处理这个属性。你写 filter: blur(2px)，iOS Safari 10 会直接忽略；必须显式并列写出两个声明。
- 错误写法：
filter: blur(2px);（旧 Safari 视为无效） - 正确写法：
-webkit-filter: blur(2px); filter: blur(2px);（顺序不能反，否则新版 Chrome 可能跳过） - 别信
@supports (filter: blur(0))：旧 Safari 9 会误报支持，检测必须用 JS：window.CSS && CSS.supports('filter', 'blur(0)')
@mixin filter 必须手动拆解函数组合，不能靠参数透传
SCSS Mixin 无法把一串滤镜函数（如 blur(2px) contrast(1.2) saturate(1.4)）当单个值安全传递，因为不同浏览器对函数顺序、空格、括号解析差异大。尤其 drop-shadow() 和 blur() 混用时，旧 WebKit 会错乱渲染阴影位置。
- 安全做法：在 Mixin 内部分开定义每个函数，用插值拼接：
filter: blur(#{$blur}) contrast(#{$contrast}) saturate(#{$saturation}); - 避免把整个字符串传入：
@include myfilter('blur(2px) contrast(1.2)')—— 这在 IE 或 X5 内核里极易崩解析 - 函数顺序影响结果：先
grayscale()再brightness()和反过来，灰度后的亮度调节效果完全不同
IE 和 Edge 12–15 完全不支持 filter，得换思路降级
这些浏览器把 filter 当作无效 CSS 声明，连 -webkit-filter 都不识别。Polyfill 如 CSS-Filters-Polyfill 虽能转成 SVG/DirectX，但性能差、不支持动画，且对 backdrop-filter 无解。
- 静态图优先用预处理 PNG：
background: url("img-blurred-fallback.png"); - 动态场景改用 Canvas：
ctx.filter = "blur(2px)"（仅 Firefox/Chrome 支持），再 fallback 到opacity: 0.98; transform: scale(1.01)模拟轻微虚化 - 灰度图别依赖
grayscale(1)：IE 下直接失效，改用内联 SVG filter 或导出灰度图
backdrop-filter Mixin 容易漏掉三个硬性前提
写了 @include glass(12px) 却没模糊效果？大概率栽在这三点上：背景不透明、父容器触发 stacking context、Android WebView 溢出饱和度。
- 背景必须用
rgba()或hsla()，transparent不行，white更不行；推荐值：rgba(255, 255, 255, 0.12)（浅色）、rgba(30, 30, 46, 0.4)（深色） - 父容器禁用
transform、opacity 、<code>filter、will-change—— 否则子元素各自计算 backdrop 区域，出现“一层模糊另一层”的错乱 -
saturate(180%)在部分 Android WebView 里会变紫，保守用160%–190%；iOS 微信 X5 内核（旧 Blink）直接无视该属性，需准备纯色背景 fallback
真正难的不是写对那几行 SCSS，而是得同时盯着三件事：WebKit 旧版的前缀规则、IE 的彻底不支持、以及 backdrop 场景下 stacking context 的隐式触发。漏掉任意一个，用户看到的就是“特效消失”而不是“渐进增强”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
