Bootstrap 5 offcanvas 模糊遮罩需通过独立 overlay 层实现，而非直接作用于 .offcanvas-backdrop；应将 backdrop-filter 应用于 body 下新增的 #offcanvas-blur-overlay 元素，并确保其 z-index 在遮罩层之下、内容层之上，同时规避 Safari 合成层与 overflow 截断问题。
Bootstrap 5 的 offcanvas 组件原生支持侧边栏弹出 + 半透明遮罩，但“模糊遮罩”不是默认行为——它需要你主动把 backdrop-filter 应用在正确层级，并绕过几个关键陷阱。直接给 .offcanvas-backdrop 加模糊无效，必须改作用对象。
为什么 offcanvas-backdrop 加 backdrop-filter 没效果
因为 .offcanvas-backdrop 是纯色层（background-color: rgba(0,0,0,0.5)），它背后是 body 的背景色，不是真实页面内容。backdrop-filter 只能模糊“它背后”的东西，而那里没有可模糊的图文。
- 错误做法：
.offcanvas-backdrop { backdrop-filter: blur(8px); }→ 白屏或无反应 - 真正要模糊的是主页面内容，所以滤镜必须加在
body或其直接子容器上 - 但
body不能直接加，否则整个页面都模糊（包括弹出的 offcanvas）；需用 CSS 选择器精准定位“遮罩生效时的页面主体” - 最稳妥路径：在
offcanvas.show状态下，给body加一个临时 class，再用该 class 控制模糊层
实现模糊遮罩的最小可行方案
核心是插入一层独立的、带 backdrop-filter 的覆盖层，z-index 在 .offcanvas-backdrop 之下、页面内容之上，并随 offcanvas 开关同步显隐。
- HTML 中，在
<body>最底部添加：<div id="offcanvas-blur-overlay" class="d-none"></div>
- CSS 定义：
.offcanvas.show ~ #offcanvas-blur-overlay {<br> display: block;<br> position: fixed;<br> top: 0;<br> left: 0;<br> width: 100%;<br> height: 100%;<br> backdrop-filter: blur(10px);<br> -webkit-backdrop-filter: blur(10px);<br> z-index: 1045; /* 低于 offcanvas-backdrop (1050)，高于页面内容 (1000~1040) */<br>} - 确保
#offcanvas-blur-overlay在<body>内位置靠后，且不被任何父容器的overflow: hidden截断 - 不要用
opacity或visibility控制显隐——必须用display: none/block，否则 backdrop-filter 在 Safari 下可能不触发重绘
移动端滚动穿透与 Safari 兼容性坑
开启模糊遮罩后，iOS Safari 常出现滚动卡顿、点击失效或白屏，根源是合成层冲突和 overflow 处理不当。
- offcanvas 展开时，Bootstrap 默认会设
body.style.overflow = 'hidden'；若你额外又写了overflow: hidden在#offcanvas-blur-overlay或其父级，Safari 会禁用 backdrop-filter - 解决方案：移除所有对
#offcanvas-blur-overlay的overflow设置，保持overflow: visible - 如果主内容区用了
position: sticky或transform，它们会创建新层叠上下文，导致模糊层被隔离——检查 computed styles 中是否出现will-change: transform或transform: translateZ(0)，临时去掉 - Safari 要求必须同时声明
-webkit-backdrop-filter，漏掉就完全不生效 - blur 值建议控制在 8px–12px：小于 8px 不明显，大于 12px 在 iPhone 上易引发渲染延迟
响应式分离：桌面常驻 + 移动端模糊弹出
别试图用 JS 切换同一个 offcanvas 的显示状态，那样会导致模糊层残留、z-index 错乱或事件绑定丢失。
- 桌面端（lg+）：侧边栏用常规
<nav class="col-lg-3">，不启用 offcanvas - 移动端（lg-）：单独写一个
<div class="offcanvas offcanvas-start d-lg-none">，并配独立的触发按钮 - 模糊遮罩只作用于移动端 offcanvas，桌面端 nav 不参与任何 backdrop-filter 操作
- 确保两个结构的 ID 不冲突，比如桌面 nav 用
id="desktop-sidebar"，移动端 offcanvas 用id="mobile-sidebar-offcanvas" - 如果用了自定义主题变量（如
--bs-offcanvas-backdrop-bg），只改透明度，别碰模糊逻辑——模糊由 overlay 层负责
真正难的不是加 blur，而是让模糊层只作用于“被遮罩的页面区域”，同时不干扰 offcanvas 自身的动画、滚动和关闭逻辑。多数失败案例都卡在 z-index 层级错位或 Safari 的合成限制上，而不是 CSS 写错了。
