现代移动端灰度滤镜需兼顾兼容性、事件响应与动画稳定性：ios 14+/android 10+支持filter: grayscale(100%)，但ios 12及旧安卓webview需降级方案；禁用grayscale(1)等错误写法；加will-change: filter解决点击失效；transition须声明在默认样式且仅限filter；父容器灰度不影响文字，子元素可用grayscale(0%)例外重置。
现代移动端（iOS 14+/Android 10+）直接用 filter: grayscale(100%) 就能可靠生效，但 iOS 12 及更早版本、部分低端安卓 WebView（如旧款华为/小米系统浏览器）会跳过滤镜或触发重绘卡顿——必须加降级方案，不能只靠 CSS。
filter: grayscale() 在移动端的写法陷阱
常见错误是把值写成 grayscale(1)、grayscale(true) 或漏掉括号和单位。这些在桌面端可能“碰巧”渲染，但在 iOS Safari 或某些安卓 WebView 中会被完全忽略。
-
grayscale(100%)：推荐，语义清晰、兼容性最好 -
grayscale(1)：虽等价于 100%，但部分旧 WebView 解析异常，慎用 -
grayscale(0.5)：合法，但 Android 7–8 系统不支持小数参数，会退回到 0% - 绝对不要写
grayscale（缺括号）、grayscale(100)（缺%）、grayscale(on)
图片变灰后点击失效或响应延迟
这是真机高频问题：加了 filter 后，<img> 或其父容器的 :active、tap-highlight-color、甚至 click 事件变慢或丢失。根本原因是部分 WebView 对带 filter 的元素启用合成层后，改变了事件捕获路径。
- 加
will-change: filter强制创建新图层，比transform: translateZ(0)兼容性更好 - 如果图片是可点击链接，确保用
<a><img></a>包裹完整，且没设pointer-events: none - 测试必须用真机连点，模拟器常无法复现
需要动态切换灰度状态时的 class 控制方案
移动端没有 :hover，得靠 JS 切换类名。但 iOS Safari 对 filter 的 transition 支持从 13.4 才真正稳定，更低版本容易跳变或卡顿。
- 默认样式里必须声明
transition: filter 0.3s ease，不能只写在 hover 或 active 状态里 - 避免用
transition: all，性能差且不可控；只过渡filter或搭配opacity微调 - 若需兼容 iOS 12，建议改用 JS 控制 class 切换时机，或 fallback 到
opacity: 0.6+contrast(0.8)
父容器批量灰度与子元素例外处理
给父容器设 filter: grayscale(100%) 能同时影响内部所有位图（<img>、<svg></svg> 内的 <:image>、背景图），但文字、边框、阴影不受影响——这点常被误认为“没生效”。
- 若容器内混有需保持彩色的图片，单独重置：
img.colorful { filter: grayscale(0%) } - 嵌套 filter 会非线性叠加（比如父级
grayscale(50%)+ 子级grayscale(50%)≠ 100%），慎用多层 - SVG 内联图标默认继承父级 filter；但用
<use href="#icon"></use>时，需确认 SVG 定义在同域且未设style="filter: none"
灰色滤镜看着简单，但移动端真正跑通要同时过兼容性、事件流、动画三关——尤其别在 iOS 12 上信“看起来没问题”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
