filter: grayscale(1) 在移动端易致卡顿、表单失真及视频/Canvas异常，iOS Safari因WebKit限制常失效或闪烁；应优先用prefers-color-scheme，JS控制时须用包裹层+will-change+禁用transition，并对表单元素显式重置filter:none!important，推荐class切换而非style操作。

filter: grayscale(1) 能快速实现黑白模式，但直接全局加它在移动端会引发性能卡顿、表单失真、视频/Canvas 渲染异常，节假日临时切换必须绕开这些坑。

为什么 filter: grayscale(1) 在 iOS 上经常失效或闪烁

iOS Safari 对 filter 的硬件加速支持不稳定，尤其在页面有 position: fixed、transform 或滚动中触发时，常出现渲染残留、灰度不生效、或触发动画卡顿。这不是 CSS 写错了，是 WebKit 的已知限制。

• 优先用 prefers-color-scheme: dark + @media 做系统级响应，而非 JS 强制加 filter
• 若必须 JS 控制，避免对 body 或 html 直接设 filter，改用包裹层（如 <div id="grayscale-wrapper">）并加上 will-change: filter
• 禁用过渡动画：transition: none !important，否则切进切出时 iOS 会抽风

如何让表单控件（如 <input type="date">）在黑白模式下仍可正常交互

原生表单元素（特别是 iOS 的 date/time/picker）被 filter 覆盖后，内部 UI 可能变模糊、点击区域偏移，甚至无法唤起面板。

• 给所有表单相关标签加白名单重置：input, select, textarea, button, [type="date"], [type="time"] { filter: none !important; }
• 不要依赖继承，必须显式声明 !important，因为 filter 不会像 color 那样自然继承
• 若需统一视觉灰度，改用 opacity: .85 + background: #ccc 模拟，比 filter 更可控

节假日开关：用 class 切换比 style 操作更可靠

通过 JS 修改 document.body.style.filter 容易被后续样式覆盖或触发重排；用 class 控制，配合 CSS 作用域和 specificity，稳定性高得多。

立即学习“前端免费学习笔记（深入）”；

• 定义两个 class：.grayscale-on { filter: grayscale(1) !important; } 和 .grayscale-off { filter: none !important; }
• 切换时只操作 class：document.body.classList.toggle('grayscale-on')
• 在 <head> 中预置 CSS，并确保它在所有其他样式表之后加载（或加 !important），防止被第三方 UI 库覆盖

真正难的不是加灰度，而是让灰度不干扰用户操作——表单、地图、视频、Canvas、WebGL 元素全得单独捞出来“放行”。节日期间上线前，务必在真机（尤其是 iPhone 12–15 系列）上滑动、点选、唤起键盘全流程测一遍。