bootstrap 5.2+ offcanvas手势滑动失效因js控制动画逻辑，纯css transform无法触发其完整交互链路，需配合类名、dom结构、视口单位（100dvh）、will-change及滚动锁定等综合修复。
为什么纯CSS transform无法触发offcanvas手势滑动
Bootstrap 5.2+ 的 offcanvas 动画不是靠你写的 transform: translateX() 驱动的——它由 JS 监听 .show 类增删来控制 visibility、opacity 和 transform 三者组合过渡。直接在 CSS 里覆盖 transform，只会让元素“静止偏移”，不激活 backdrop 插入、Esc 关闭、焦点捕获、滚动锁定等关键逻辑。你看到的“能滑”，其实是 JS 已经在运行，而你的 CSS 恰好没冲突；一旦漏掉 tabindex="-1" 或 DOM 结构不对，手势就彻底失效。
移动端 Safari 手势滑动卡顿或截断的根因与修复
iOS Safari 对 100vh 计算不准（地址栏收放导致视口高度跳变），且未设 will-change: transform 时，transform 动画容易掉帧。这不是 Bootstrap 的 bug，是 WebKit 渲染管线的已知限制。
- 把
offcanvas-body的高度约束从height: 100vh改为max-height: 100dvh（dvh是动态视口单位，iOS 15+ 支持） - 在
.offcanvas上加will-change: transform，提示浏览器提前升格图层 - 禁用 body 滚动时，别只靠
body { overflow: hidden }—— iOS 下需额外加body { position: fixed; top: 0; width: 100%; }才能真正锁死滚动 - 如果用了自定义 header（比如带关闭按钮的 bar），必须单独放在
.offcanvas-header内，不能塞进.offcanvas-body，否则100dvh减法会错位
如何让手指从边缘滑动直接唤出抽屉（iOS 原生手势兼容）
原生 offcanvas 不支持 swipe-to-open，这是故意设计：它依赖显式点击触发，确保可访问性（键盘、屏幕阅读器）。若强行接入手势库（如 Hammer.js），会破坏 data-bs-dismiss="offcanvas" 的语义闭环，且在 VoiceOver 下焦点管理失效。
- 真要支持边缘滑动，必须用 JS 拦截
touchstart/touchmove，计算位移后手动调用bootstrap.Offcanvas.getInstance(el).show() - 但需同步处理：滑动过程中禁用默认滚动（
e.preventDefault()）、判断方向阈值（建议 ≥ 30px）、松手后根据速度决定是展开还是回弹 - 更稳妥的做法是放弃边缘滑动，改用固定位置的汉堡按钮 +
btn-lg+ 最小触摸目标44×44px，符合 WCAG 2.1 和 Apple HIG 规范 - 注意：iOS 17+ 的
overscroll-behavior: contain可防止抽屉内滚动穿透到 body，但 offcanvas 默认已设该属性，无需额外加
遮罩层点击无响应？先查这三点
遮罩层（.offcanvas-backdrop）点击关闭失败，90% 不是代码问题，而是 DOM 或样式干扰。
- 检查
.offcanvas是否被嵌套在transform、position: relative或overflow: hidden的父容器中——只要父级有这些样式，backdrop 就可能插入错位或 z-index 被压住 - 确认
body没被其他 JS（如轮播图、弹窗插件）动态加了style="overflow: hidden"后又没清理，导致 backdrop 的 click 事件委托失效 - 用开发者工具选中灰色遮罩层，看 computed 样式里
pointer-events是否为auto；若为none，说明被更高层元素（如 fixed header）的z-index截获了事件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
