backdrop-filter 在 safari 上不生效，90% 是因父容器未设半透明背景色；它仅模糊背后内容，需配合 rgba 背景才可见效果，且 safari 14+ 才支持。
backdrop-filter 在 Safari 上不生效？检查是否启用了透明背景
毛玻璃效果失效，90% 是因为父容器没设 background-color 为半透明色。纯 backdrop-filter: blur(10px) 本身不会产生视觉变化，它只对「背后的内容」做模糊，如果背后是不透明的白色背景（比如默认 body），那就等于白纸糊在玻璃上——看不出来。
- 必须给应用了
backdrop-filter的元素设置background-color: rgba(255,255,255,0.2)或类似带 alpha 的值 - Safari 14+ 才支持
backdrop-filter，旧版会直接忽略，不报错也不降级，容易误以为写错了 - 避免用
background: transparent，它在部分 Safari 版本中会被当作完全无背景处理，导致滤镜失效 - 不要把
backdrop-filter和filter混用在同一元素上，Safari 对两者的合成行为不稳定
blur 值设多大才自然？别硬套 px 单位
模糊半径不是越大越好，backdrop-filter: blur() 的实际观感高度依赖设备像素比和容器尺寸。在 Retina 屏上，blur(8px) 可能比普通屏上的 blur(16px) 还“重”。
- 推荐从
blur(4px)起步，在真机上预览；超过blur(12px)容易丢失背后内容轮廓，失去“玻璃感” - 避免使用
rem或%单位，blur()只接受绝对长度单位（px、em等），且em会受字体大小影响，不可控 - 如果需要响应式模糊强度，只能靠 JS 动态切换 class，CSS 本身不支持媒体查询内改
blur值
和 background-gradient 混用时颜色发灰？alpha 值要重新算
很多人想叠加渐变 + 毛玻璃，写成 background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.1)), white，结果发现整体偏暗、层次糊掉——问题出在多重背景的 alpha 叠加逻辑上。
- CSS 多层 background 是按绘制顺序逐层合成的，第一层渐变的
rgba(0,0,0,0.3)已经削弱了背后内容，再叠一层半透容器背景，最终透过率可能只剩 10%~15% - 解决方法：把渐变层的 alpha 降到
0.05~0.1，主容器背景用rgba(255,255,255,0.15)，靠两者叠加达到柔和过渡 - 不要试图用
background-blend-mode修正，它和backdrop-filter在 Safari 中存在渲染优先级冲突，极易出现闪烁或空白
滚动时卡顿或闪屏？别让 backdrop-filter 作用在滚动容器上
把 backdrop-filter 直接加在 overflow-y: auto 的容器上，尤其内容高、层级深时，iOS Safari 会频繁触发全图重绘，导致滚动掉帧甚至白屏。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：将毛玻璃效果放在一个固定定位的遮罩层（
position: fixed），用z-index盖在滚动区域上方，让它只模糊固定背景，不参与滚动计算 - 避免在
transform动画元素上同时用backdrop-filter，两者叠加在 WebKit 内核中会强制启用软件渲染 - 如必须动态启用/禁用，用
backdrop-filter: none切换，别用display: none或visibility: hidden，否则 Safari 会丢失滤镜上下文，恢复后需手动触发重绘
backdrop-filter 的核心约束其实就一条：它不创造模糊，只暴露模糊——背后得有东西，还得让浏览器知道该去哪取。所有异常，基本都卡在「背景透明度」「渲染层级」「设备兼容性」这三块里。调的时候别盯着滤镜参数猛改，先确认那层“玻璃”后面是不是真有风景。
