<p>backdrop-filter 必须手动添加 -webkit- 前缀且与标准属性成对出现，透明度须用 rgba() 控制，blur 值仅支持 px 单位并推荐 4–8px，overflow: hidden 父容器会导致 Safari 失效。</p>
backdrop-filter 必须手动加 -webkit- 前缀
Less 不会自动补全浏览器前缀，backdrop-filter 在 Safari 和旧版 Chrome 中缺 -webkit-backdrop-filter 就直接失效，且控制台不报错。只写一行 backdrop-filter: blur(6px) 在 iOS 16.4 或 macOS Monterey 的 Safari 上必然白屏或显示纯色。
正确做法是用 Mixin 封装整条规则块，确保前缀和标准属性成对出现：
.glass(@blur: 6px, @alpha: 0.08) {
-webkit-backdrop-filter: blur(@blur);
backdrop-filter: blur(@blur);
background-color: rgba(255, 255, 255, @alpha);
}别把前缀塞进变量或字符串里——它必须是独立声明的 CSS 属性。
透明度只能靠 rgba() 控制，不能用 opacity
opacity 会强制创建隔离合成层，backdrop-filter 就采样不到背后内容，模糊直接消失，只剩一层灰蒙蒙的半透明块。这不是兼容性问题，是 CSS 合成规范明确禁止的行为。
立即学习“前端免费学习笔记（深入）”；
所有透明度调节必须收束到 background-color: rgba() 的第四个参数上：
- ✅ 正确：
background-color: rgba(255, 255, 255, 0.12) - ❌ 错误：
opacity: 0.12或background-color: white; opacity: 0.12 - ⚠️ 连带风险：父容器设了
opacity，子元素的backdrop-filter全部失效
blur 值必须用 px 单位，且推荐 4–8px 起步
backdrop-filter: blur() 只接受绝对长度单位，rem、%、em 会被忽略或触发解析错误。在 Retina 屏上，blur(6px) 的视觉重量可能等同于普通屏的 blur(12px)，盲目加大数值反而导致文字发虚、边缘失焦。
移动端尤其敏感：
- iOS 16.5 以下 Safari 容易卡顿，慎用超过
blur(10px) - Android 中低端机上
blur(12px)可能引发帧率骤降 - 若叠加
saturate(150%)提亮，可同步把blur往下调一档（比如从 8px 改为 6px）
父容器 overflow: hidden 是隐形杀手
当毛玻璃元素嵌套在 overflow: hidden 的父容器中（尤其还带 border-radius），Safari 会直接放弃 backdrop 合成，效果彻底消失——不是代码没生效，是渲染管线被截断了。
临时解法只有两个：
- 给毛玻璃元素加
position: absolute脱离文档流，再用z-index手动调层 - 改父容器为
overflow: visible，哪怕只是临时调试也比反复怀疑代码强
真正难的不是拼对那几行 Less，而是得同时盯住三件事：前缀是否完整、背景是否透出、渲染上下文是否畅通——漏掉任意一项，效果就断在真机上。
