不能直接对 html 或 body 设置 filter: grayscale(1)，因 WebKit 渲染层存在硬伤，会导致移动端卡顿、表单失灵、视频黑屏及 iOS Safari 闪烁失效。
直接给 html 或 body 加 filter: grayscale(1) 在移动端会卡顿、表单失灵、视频黑屏，且 iOS Safari 常闪烁或失效——这不是写法错，是 WebKit 渲染层的硬伤。
为什么不能对 html 直接设 filter
iOS Safari 对 filter 的硬件加速支持极不稳定，尤其当页面含 position: fixed、transform 或处于滚动中时，会出现：渲染残留（局部没灰）、灰度突然消失、切进切出卡顿一帧以上。这不是 CSS 写错了，是 WebKit 已知限制，2026 年仍无彻底修复。
更关键的是：filter 会穿透到所有后代，包括 <input type="date">、<video></video>、<canvas></canvas>，导致原生控件 UI 模糊、点击区域偏移、面板唤不起。
避免方式：
立即学习“前端免费学习笔记（深入）”；
- 不用
document.documentElement.style.filter，改用包裹层：在内第一层加<div id="grayscale-wrapper">，只对它设filter - 必须加
will-change: filter，提前告知浏览器该元素将频繁变化 - 全局禁用过渡：
#grayscale-wrapper { transition: none !important; }，否则 iOS 会抽风
表单、视频、Canvas 元素必须显式“放行”
原生表单控件（尤其是 iOS 的 date/time/picker）被 filter 覆盖后，内部绘制逻辑会被干扰，不是“看起来模糊”，而是根本无法触发选择器面板。
正确做法是白名单重置，且必须带 !important（filter 不继承，靠 specificity 强制覆盖）：
input, select, textarea, button,
[type="date"], [type="time"], [type="color"],
video, canvas, iframe,
.map-container, .webgl-canvas {
filter: none !important;
}
注意：.map-container 和 .webgl-canvas 是常见地图/3D 库的容器类名，需按你实际项目补全；iframe 必须单独处理，否则嵌入的视频或第三方组件仍会变灰。
用 class 切换比 JS 直改 style 可靠得多
运营需求常是“今天下午三点准时生效”，靠 document.body.style.filter = 'grayscale(1)' 极易被后续样式覆盖、触发重排、或被第三方 UI 库 reset 掉。
推荐方案：
- 在
<head>最底部预置 CSS（确保它在所有其他样式表之后）：.grayscale-on { filter: grayscale(1) !important; will-change: filter; }.grayscale-off { filter: none !important; } - 切换只操作 class：
document.getElementById('grayscale-wrapper').classList.toggle('grayscale-on'); - 状态记忆用
localStorage，但注意：节假日模式通常不需用户手动开关，而是服务端下发开关时间戳，前端只做判断
真机测试环节最容易被跳过，但最致命
模拟器跑通 ≠ 真机能用。务必在 iPhone 12–15 系列上实测以下流程：
- 快速上下滑动页面，观察是否出现局部彩色残留
- 点开
<input type="date">，确认面板能否正常弹出、日期可选 - 播放
<video>，检查是否黑屏或卡顿 - 打开地图组件，拖拽缩放，验证交互是否跟手
真正难的从来不是加灰度，而是让灰度不干扰任何交互——表单、地图、视频、Canvas、WebGL，全得一个个捞出来“放行”。节日期间上线前，这一步不能省。
