filter: grayscale() 在现代主流移动浏览器中完全可用，但 iOS 12 及更早版本和部分低端安卓 WebView 存在兼容性问题；必须用 grayscale(100%) 等合法语法，避免交互失效与动画跳变。
filter: grayscale 在移动端是否可靠
直接说结论：filter: grayscale() 在现代主流移动浏览器（iOS Safari 9.3+、Chrome for Android 50+、Android WebView 50+）中完全可用，但 iOS 12 及更早版本对 filter 的硬件加速支持不一致，部分低端安卓机型（如旧款华为/小米 WebView）可能触发重绘卡顿或完全不生效。
关键判断点：如果你的用户基本覆盖 iOS 14+/Android 10+，放心用；若需兼容 iOS 11–12 或低端安卓，建议加降级方案。
如何正确写 grayscale 值避免意外失效
常见错误是写成 filter: grayscale(1) 或 filter: grayscale(true)——这些在桌面端可能“碰巧”工作，但在部分移动端 Safari 中会被忽略。必须使用带单位的数值或百分比。
-
filter: grayscale(100%)：完全灰度（推荐，语义清晰、兼容性最好） -
filter: grayscale(1)：等价于100%，但某些旧 WebView 解析异常，慎用 -
filter: grayscale(0.5)：50% 灰度，合法，但部分安卓 7–8 系统不支持小数参数 - 绝对不要写
filter: grayscale（缺括号）、grayscale(100)（缺%）、grayscale(on)
图片变灰后点击区域失效或交互异常
这是移动端高频问题：加了 filter 后，<img> 或其父容器的 :active、tap-highlight-color、甚至 click 事件响应变慢或丢失。根本原因是部分 WebView 对带 filter 的元素启用合成层后，改变了事件捕获路径。
立即学习“前端免费学习笔记（深入）”；
- 给图片或其容器加
will-change: filter可缓解，但会增加内存开销 - 更稳妥的做法：用
transform: translateZ(0)强制创建新图层，比will-change兼容性更好 - 如果图片是可点击链接，确保
<a>包裹完整，且a img没有设置pointer-events: none - 测试时务必真机连点，模拟器常无法复现该问题
需要渐变灰度或条件切换时怎么写
纯 CSS 实现 hover 或状态切换灰度没问题，但移动端没有 hover，得靠 class 控制。注意 transition 要显式声明 filter，否则不会动画。
.photo {
filter: grayscale(0%);
transition: filter 0.3s ease;
}
.photo.grayscale {
filter: grayscale(100%);
}
重点提醒：iOS Safari 对 filter 的 transition 支持从 13.4 才真正稳定，低于此版本可能出现跳变或卡顿。如需平滑过渡，可搭配 opacity 微调，或改用 JS 控制 class 切换时机。
灰色滤镜看着简单，但移动端真正跑通要同时过兼容性、事件流、动画三关——尤其别在 iOS 12 上信“看起来正常”。
