Bootstrap 5 的 offcanvas 默认自带遮罩，无需手动添加 backdrop 元素；应通过修改 .offcanvas-backdrop 的 background-color 调整透明度，避免使用 opacity；响应式需分离 DOM 结构；offcanvas 必须为 body 直接子元素；模糊效果需额外覆盖层实现。
offcanvas 默认就有遮罩，别自己手写 backdrop
Bootstrap 5 的 offcanvas 组件原生支持半透明遮罩，不需要额外写 <div class="backdrop"> 或用 JS 控制显隐。只要结构正确，data-bs-backdrop="true（默认值）就会自动插入并渲染 .offcanvas-backdrop 元素，背景是 rgba(0,0,0,0.5)。
常见错误是手动加一个 <div> 并设 position: fixed; background: rgba(0,0,0,0.5)——这会导致：
- 双遮罩（页面变黑、点击失效）
-
z-index冲突（遮罩盖不住菜单，或菜单盖不住遮罩） - iOS 滚动卡顿（合成层重叠触发渲染异常）
确保触发按钮有 data-bs-toggle="offcanvas" 和对应 href 或 data-bs-target；offcanvas 容器必须带 data-bs-placement（如 "start"）；不要移除或重命名 .offcanvas-backdrop 类——它是 Bootstrap JS 动态管理的。
改遮罩透明度，只动 background-color，别碰 opacity
想调浅或加深遮罩，直接覆盖 .offcanvas-backdrop 的 background-color，不是整个元素的 opacity。
opacity: 0.3 看似简单，但会让遮罩“视觉变薄”，而点击穿透区域仍完整，用户易误判是否可点；更严重的是，它会连带遮罩内的事件监听器降权，导致 iOS 下点击关闭失效。
稳妥做法是：
- 覆盖 CSS：
.offcanvas-backdrop { background-color: rgba(0, 0, 0, 0.3) !important; } - Bootstrap 5.2+ 可用变量：
:root { --bs-offcanvas-backdrop-bg: rgba(0, 0, 0, 0.3); } - 若设为
rgba(0,0,0,0)，遮罩视觉消失，但逻辑仍在（body滚动仍被锁），需同步加data-bs-backdrop="false"
修改后务必清缓存——Bootstrap 的 CSS 权重高，普通选择器常被忽略。
桌面常驻 + 移动端侧滑，必须拆两套 DOM，不能靠 JS 切类
想让侧边栏在桌面显示为常驻导航、移动端才收进 offcanvas，不能靠 JS 动态切换 show 状态或增删 offcanvas 类——那样会破坏 offcanvas 的生命周期管理，导致 backdrop 残留或重复初始化。
正确做法是用响应式工具类分离两套结构：
- 桌面导航：用常规
<nav>或position: sticky容器，加class="d-none d-lg-block" - 移动端 offcanvas：
<div class="offcanvas offcanvas-start d-lg-none" id="mobile-sidebar"> - 触发按钮分别指向不同 ID，不共用
data-bs-target
注意：offcanvas 必须是 <body> 直接子元素，嵌套在 <main> 或 <div class="container"> 里会导致遮罩不显示、动画卡住。
模糊遮罩要另起一层，不能直接作用于 .offcanvas-backdrop
Bootstrap 原生不支持模糊遮罩（backdrop-filter）。直接给 .offcanvas-backdrop 加 backdrop-filter: blur(8px) 无效——因为它的背后是 body 背景色，不是真实页面内容。
真正要模糊的是主页面内容，所以滤镜必须加在独立覆盖层上，且层级关系严格：
- 在
<body>底部加：<div id="offcanvas-blur-overlay" class="d-none"></div>
- CSS 中控制显隐和层级：
.offcanvas.show ~ #offcanvas-blur-overlay { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1045; }（1045需低于.offcanvas-backdrop的1050，高于页面内容的1000~1040） - 必须用
display: none/block控制显隐，opacity或visibility在 Safari 下可能不触发重绘
模糊层位置必须靠后、且不能被任何父容器的 overflow: hidden 截断——这是 iOS 卡顿最常被忽略的点。
