不能只靠 backdrop-filter，必须配合前缀、降级和运行时检测，否则 ios 15.7 及更早、多数中低端安卓机会白屏或卡死；-webkit-backdrop-filter 必须写在标准属性前，safari 否则整行忽略；@supports 检测不可靠，需 ua 嗅探或像素值实测；blur 值需控制（如全屏模态框≤6px），且依赖背后真实内容；svg 滤镜是唯一稳定 fallback 方案。
直接结论：不能只靠 backdrop-filter，必须配合前缀、降级和运行时检测，否则 iOS 15.7 及更早、多数中低端安卓机上会白屏或卡死。
为什么 -webkit-backdrop-filter 必须写在前面
不是“加了就好”，而是 Safari（包括 iOS 16.4 之前所有版本）根本不会解析无前缀的 backdrop-filter。它只认 -webkit-backdrop-filter，且如果标准属性写在前面，浏览器会跳过整条声明——哪怕后面跟着正确的前缀。
- 正确顺序：
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); - 错误写法：
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);（Safari 忽略整行） -
-moz-backdrop-filter可以保留，但 Firefox 完全不支持，它只是占位符，无实际作用
@supports 检测为何不可信
@supports (backdrop-filter: blur(1px)) 在 iOS Safari 上会返回 true，但渲染结果为空白——这是 UA 假阳性，不是 bug，是 WebKit 的实现缺陷。
- 真机测试发现：iPhone 12（iOS 15.7）上
getComputedStyle(el).backdropFilter返回"blur(10px)"，但元素背后完全透明，无模糊 - 轻量级绕过方案：UA + 系统版本嗅探，例如
/OS [1-15]_/.test(navigator.userAgent)直接禁用 blur - 重一点但可靠：创建临时元素插入 DOM，用
el.offsetHeight或requestAnimationFrame后读取像素值对比，仅首屏触发一次
blur 值设多大才不掉帧
不是越模糊越高级，而是越容易触发离屏渲染失败。实测阈值与容器类型强相关：
- 全屏模态框：最大用
blur(6px)，配合will-change: transform提前升层 - 小面积标签栏 / 导航项：建议
blur(4px)，且避免与overflow: scroll共存（Safari 强制重绘整层） - 绝对禁止在
position: fixed元素上使用blur(8px)+—— iOS 会丢弃该图层，显示为纯色块 - 中低端安卓（如 Redmi Note 9）滚动时，
blur(8px)帧率常跌破 30fps
真正能 fallback 的替代方案只有 SVG 滤镜
Canvas 渲染太重，伪元素叠加无法响应滚动背景，而 SVG <filter></filter> 是唯一零 JS、跨设备稳定、可复用的方案：
<svg width="0" height="0"><defs><filter id="glass-blur" x="-50%" y="-50%" width="200%" height="200%"><fegaussianblur stddeviation="4"></fegaussianblur></filter></defs></svg><div class="glass" style="background: url(#glass-bg) filter: url(#glass-blur);"></div>
- 注意：
filter: url(#glass-blur)只对 SVG 内容生效，所以背景必须抽成<image></image>或用background-image: url(...)引入 - SVG 滤镜兼容 IE11+ 和所有移动端，但无法动态模糊“实时滚动内容”，只适合静态或低频更新背景
- 若需动态模糊，只能用 canvas +
getImageData，但性能开销极大，仅限小区域、低频触发场景
最易被忽略的一点：即使所有 CSS 写对了，backdrop-filter 仍要求元素背后有“可被模糊的内容”——如果父容器用了 overflow: hidden 或背景是纯色，那再好的写法也出不来效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
