直接给 .modal-backdrop 加 backdrop-filter 无效，因其背后是 body 纯色背景而非真实内容；须将 blur 应用于带半透背景的 .modal-content，并配 -webkit- 前缀、避免 overflow: hidden 和 transform 干扰。
默认的 .modal-backdrop 加 backdrop-filter: blur() 是无效的——它背后没有内容可模糊，只会白屏或没反应。
为什么直接给 .modal-backdrop 加模糊没用
因为 .modal-backdrop 本身是一个纯色遮罩层（rgba(0,0,0,0.5)），它盖在页面内容之上；backdrop-filter 只能模糊“它背后”的东西，而它背后是 的背景色（通常是白色），不是真实图文内容。结果就是：要么啥也不糊，要么 Safari 直接白屏。
- 真正要模糊的是页面主体内容，所以滤镜必须加在
.modal-content或.modal-dialog这类“浮在遮罩之上的容器”上 -
.modal-content必须带半透明背景，比如background-color: rgba(255, 255, 255, 0.92)，全透明（0）或不透明（1）都会让模糊失效 - Safari 对合成上下文敏感：父级若有
transform: translateZ(0)、will-change: transform或filter，backdrop-filter会静默禁用
给 .modal-content 加毛玻璃的最小可行 CSS
这段代码不改 HTML、不碰 JS，纯 CSS 生效，且兼容 Chrome / Edge / Safari（加前缀后）：
.modal-content {
background-color: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
- blur 值建议控制在
4px–8px：小于4px不明显，大于8px移动端易卡顿 - 别用
border-radius配合overflow: hidden——这会裁掉模糊溢出区域，导致边缘生硬发虚 - 如果用了
.modal.fade，确保.modal-content的 transition 不被覆盖，否则入场时模糊会延迟出现
Safari 白屏/卡顿的典型诱因与修复
不是兼容性问题，而是渲染管线被意外阻断。常见原因和对应动作：
-
body或.modal父容器有overflow: hidden→ 改成overflow: visible或临时加-webkit-overflow-scrolling: touch -
.modal被包在filter: drop-shadow()容器里 → 拆出来，或换用box-shadow - 导航栏或页头用了
transform: translateZ(0)→ 把它从.modal的祖先链中移除，或用contain: layout paint隔离 - 检查 computed 样式：在 DevTools 里看
backdrop-filter是否显示为blur(6px)且未被划掉；若被划掉，往上查哪条规则覆盖了它
去掉模糊后视觉“粘连”的补救方案
关掉 backdrop-filter 后，.modal-backdrop 就只剩一层灰蒙蒙的遮罩（rgba(0,0,0,0.5)）。如果模态框和底层都是浅色，边界容易模糊不清：
- 把遮罩透明度微调到
rgba(0, 0, 0, 0.4)，降低压迫感 - 给
.modal-dialog加轻微阴影：box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15)，替代纵深感 - 移动端 Safari 有时残留淡灰雾（非模糊），补一句：
-webkit-backdrop-filter: none到.modal-backdrop规则里 - 别试图用
filter: blur()替代——它会把模态框自己也糊掉，完全不可控
最常被忽略的一点：blur 值再小，只要父容器触发了强制合成（比如 will-change: transform），Safari 就可能整块禁用 backdrop 渲染，且不报错、不警告——得靠 DevTools 的 computed 面板手动确认是否生效。
