iOS Safari 9–12 仅支持 -webkit-filter: grayscale(1)，不识别标准 filter: grayscale(100%)，需并列声明且前缀在前；数值须为无单位浮点数（如 1），SCSS 中需用插值 #{$value} 并确保类型正确。
为什么直接写 filter: grayscale(100%) 在 iOS Safari 9–12 里不生效
不是语法错，也不是漏单位——这些版本的 WebKit 只认 -webkit-filter，且不会 fallback 到标准属性。你写 filter: grayscale(100%)，iOS Safari 10 会直接忽略；必须并列声明，且顺序不能颠倒：-webkit-filter: grayscale(1) 放前，filter: grayscale(100%) 放后。注意数值单位差异：grayscale(1) 是无单位浮点数，grayscale(100%) 是百分比，两者语义等价但旧 Safari 只接受前者。
@mixin grayscale() 必须手动拼接前缀和插值，不能透传字符串
SCSS Mixin 无法安全地把一整串滤镜函数（比如 "grayscale(50%) contrast(1.2)"）当参数传入，因为不同浏览器对空格、括号、顺序解析不一致，尤其在 X5 内核或旧 WebKit 中极易崩溃。正确做法是把每个参数拆开，在 Mixin 内部用插值拼接：
@mixin grayscale($value: 100%) {
-webkit-filter: grayscale(#{$value});
filter: grayscale(#{$value});
}
关键点：
-
#{$value}必须带插值符号，否则 SCSS 编译报错 -
$value类型要是带单位的数值（如50%或0.5），不能传字符串"50%"，否则生成 CSS 时多出引号导致失效 - 若需组合多个滤镜（如灰度 + 亮度），得显式拆解：
-webkit-filter: grayscale(#{$g}) brightness(#{$b}); filter: grayscale(#{$g}) brightness(#{$b});
IE 和 Edge 12–15 完全不支持 filter，降级方案不能只靠 CSS
这些浏览器连 -webkit-filter 都不识别，@supports (filter: grayscale(0)) 检测也不可靠——旧 Safari 9 会误报支持。JS 检测更准：window.CSS && CSS.supports('filter', 'grayscale(0)')。但实际项目中，更务实的做法是：
立即学习“前端免费学习笔记（深入）”；
- 对关键图片（如头像、图标）提前导出灰度 PNG，用
background-image降级 - 对列表页批量图片，避免 JS 全量调用
grayscale.js，首屏性能会明显拖慢 - 用
opacity: 0.98+transform: scale(1.01)模拟轻微虚化，仅作视觉弱提示，不追求精确灰度 - 绝对不要在
@supports块里包裹整个组件样式——一旦检测失败，整块样式丢失
过渡动画卡顿？问题不在 transition，而在合成层没建好
filter 本身不触发重排，但浏览器不会自动为每个带 filter 的元素创建独立合成层。常见掉帧场景包括：父容器有 transform: translateZ(0)、position: fixed 容器内使用、或同时用了多个 will-change。实操建议：
-
transition: filter 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)，别用ease，起始段太慢 -
will-change: filter只在mouseenter时动态加，mouseleave后立刻移除，否则内存占用飙升 - 给图片设
display: block，避免行内元素基线间隙引发重绘闪烁 - 大图轮播慎用 hover 切换灰度，改用
opacity叠加灰色遮罩层，更稳
