ios safari 中直接给 body 或 html 添加 filter: grayscale(100%) 基本无效，因高度不足、层叠上下文隔离及 iframe/video/canvas 不继承导致；应使用包裹层 + will-change + 禁用过渡 + 显式重置表单与关键元素滤镜。
直接给 html 元素加 filter: grayscale(100%) 是唯一能覆盖所有内容的写法，但 iOS Safari 上大概率卡顿、闪烁或失效——这不是代码错，是 WebKit 渲染限制。
为什么 body 上加 filter 在移动端基本无效
很多人写 body { filter: grayscale(100%) } 发现导航栏、弹窗、滚动条全没变灰，甚至文字模糊。根本原因不是选择器写错了：
-
body高度常不足（尤其空内容或height: 100%失效），滤镜作用区域为 0 -
position: fixed或transform容器会创建独立层叠上下文，filter穿透不了 -
iframe、video、canvas默认不继承父级filter，得单独处理
移动端必须用包裹层 + will-change + 禁用过渡
iOS Safari 对 filter 的硬件加速支持极不稳定，直接切 html class 会触发渲染残留或闪屏。稳妥做法是：
- 不用
html，改用包裹层：<div id="grayscale-wrapper">...</div> - 给该层加
will-change: filter，提前告知浏览器要动滤镜 - 强制禁用过渡：
#grayscale-wrapper { transition: none !important; }，否则切进切出时 iOS 会抽风 - 避免在该层或其祖先上用
transform、opacity 、<code>backface-visibility，这些都会干扰图层合并
表单和关键元素必须显式重置 filter: none !important
iOS 原生 <input type="date">、<select></select> 被 filter 覆盖后，点击区域偏移、面板唤不起、文字发虚。不能靠继承或 z-index 补救：
- 必须写具体选择器：
input, select, textarea, button, [type="date"], [type="time"] { filter: none !important; -webkit-filter: none !important; } - 关键信息如通告 banner、二维码、紧急电话也一样：
.notice-banner, .qr-code { filter: none !important; } - 检查这些元素是否被某层弹窗容器或 modal wrapper 自己也加了
filter，否则会叠加生效
别依赖 prefers-color-scheme，它和悼念模式无关
@media (prefers-color-scheme: dark) 是系统深色模式开关，不是哀悼模式。节假日临时切换必须 JS 控制，但要注意：
- 不要操作
style.filter，用classList.toggle()切换 class 最轻量、可持久化 - 预设样式：
#grayscale-wrapper.grayscale { filter: grayscale(100%); -webkit-filter: grayscale(100%); } - 首屏防闪：在
内联脚本中读取localStorage并立即加 class，别等 DOM 加载完 - IE/旧 Edge 直接放弃支持——
filter: grayscale()在 IE 完全不生效，强行 polyfill 成本高、性能差，不值得
真正难的不是怎么写那行 grayscale(100%)，而是处理 iOS 渲染残留、表单失真、以及那些你以为“肯定不会灰”结果全糊成一片的 fixed 导航栏。这些坑不提前填，上线当天就会出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
