ios safari 中 backdrop-filter 生效需同时满足：ios 13.4+、background-color 含 alpha 值、声明 -webkit-backdrop-filter、元素触发层叠上下文、父容器避免 overflow: hidden；blur 安全值为 4–8px，webview 内基本不支持，须 ua 检测降级。
在 iOS 移动端，backdrop-filter 失效不是 bug，而是 Safari WebKit 的硬性限制没被满足——不补全条件，写十遍 blur(10px) 也没用。
iOS Safari 必须满足的三个生效条件
缺一不可，且顺序无关：iOS 13.4+ 起支持，但只对“合规结构”放行。
-
background-color必须带 alpha 值，哪怕只是rgba(255,255,255,0.01)；transparent、white、#fff全部无效 - 必须声明
-webkit-backdrop-filter，仅写标准backdrop-filter在 iOS 上静默忽略 - 元素需触发层叠上下文：加
position: relative+z-index: 0，或isolation: isolate，纯div默认不满足
父容器 overflow: hidden 是最隐蔽的杀手
iOS Safari 对 backdrop 渲染区域裁剪极其严格：模糊需要向外扩散像素（比如 blur(8px) 实际采样范围比元素宽高各多出 8px），overflow: hidden 会直接截断这个区域，导致边缘发灰、中间空白，甚至整个滤镜失效。
- 临时排查：给父级加
overflow: visible或移除该声明 - 生产环境替代：把毛玻璃元素抽离到
body直接子级，用position: fixed定位，避开嵌套容器限制 - 如果必须嵌套，改用
padding留白代替overflow: hidden裁剪视觉边界
blur 值和性能在 iOS 上真有强关联
iOS WebKit 对高斯模糊的 GPU 调度不如桌面 Safari 成熟，blur 半径稍大就容易触发降级或帧率骤降。
- 实测安全区间：
blur(4px)～blur(8px)，blur(12px)在 iPhone XR 及更老机型上已明显卡顿 - 别信“越大越高级”——
blur(20px)在 iOS 15+ 上可能直接渲染为纯色块，而非模糊 - 搭配
saturate(1.2)可缓解模糊导致的颜色发灰，但别叠加太多滤镜，iOS 不支持复合值链式解析
微信/钉钉等 WebView 内根本别试
X5 内核（微信）、UAP 内核（钉钉）等安卓系 WebView 基本不实现 backdrop-filter，部分版本甚至会因识别到该属性而清空整个元素内容——页面变白、按钮消失、交互失灵都是典型表现。
- 必须用 UA 检测 + JS 移除 class：不能依赖
@supports，因为这些内核常谎报支持 - 兜底方案优先用
background: rgba(255,255,255,0.08)+border模拟通透感，比强行启用崩溃强十倍 - 若设计强制要求“玻璃感”，移动端请改用静态模糊背景图（
background-image: url(blur-bg.png)），可控且零兼容风险
真正难的不是写出模糊效果，而是判断它该不该出现在当前设备上——iOS 上一个没设 z-index 的弹窗、微信里一段带 -webkit-backdrop-filter 的 CSS，都可能让整页交互陷入不可逆的异常。别省那几行检测逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
