必须用transform: translateX()而非left或margin-left，因后者触发重排导致iOS Safari黄警告、安卓掉帧、“闪一下”或卡顿；translateX走GPU合成层，只重绘不干扰布局，且需配合fixed/absolute定位、明确width及100%位移计算。
必须用 transform: translateX()，而不是 left 或 margin-left —— 否则 iOS Safari 会标黄警告，安卓低端机掉帧明显，抽屉滑出时大概率“闪一下”或卡在半开状态。
为什么不能用 left 或 margin-left 实现侧边抽屉
改 left 会强制浏览器每次动画帧都重排（reflow），尤其当页面有滚动、文字渲染或 flex 布局时，性能雪崩；margin-left 在部分 Android WebView 中还会触发意外的文档流抖动。而 transform: translateX() 走 GPU 合成层，只重绘（repaint），不干扰布局，iOS 和 Chrome 都能稳定跑满 60fps。
常见错误现象：
-
left: -280px在 iPad 横竖屏切换后偏移错位，因为父容器position: relative可能被 flex 压缩或重置 -
margin-left: -100%在小屏下按视口宽计算，直接把侧边栏推到屏幕外几倍远 - DevTools 控制台没报错，但动画一卡一卡，且 Safari 的 timeline 里频繁出现黄色 layout 标记
translateX(-100%) 的前提条件和坑点
translateX(-100%) 是按元素自身宽度计算位移，不是视口宽度 —— 所以侧边栏必须有明确的 width（如 width: 280px），否则百分比失效，小屏下可能飞走、大屏下收不干净。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 侧边栏容器必须设
position: fixed或position: absolute，否则translateX会影响文档流，导致主内容跳动 - 别同时写
left: 0和transform: translateX(0)—— 浏览器会合并计算，行为不可控，容易位移偏移 - 不要用
vw单位设宽度（如width: 70vw），它和translateX(-100%)的基准不一致，动画过程会拉扯变形 - 初始状态必须是
transform: translateX(-100%)+visibility: visible，不能用display: none，否则transition直接跳过
遮罩层（backdrop）点击失效的真正原因
不是 JS 绑错了事件，而是 DOM 层级和尺寸没对齐 —— 点击永远落在更高 z-index 的元素上，或者遮罩根本没盖满整个视口。
关键配置必须全部满足：
-
.backdrop要设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;—— 不能用100%，它相对父容器，不是视口 -
z-index必须比侧边栏低一级：比如侧边栏是z-index: 1000，遮罩就得是z-index: 999 - 必须加
cursor: pointer，某些安卓 WebView 下没这句，点击区域响应迟钝甚至无反应 - 遮罩的
transition要单独写：transition: opacity 0.3s, visibility 0.3s；visibility不显式声明时长，关闭时会瞬间消失，导致点击穿透
响应式断点与 JS 切换的协作边界
纯 CSS 媒体查询控制显隐，在 iPad 横竖屏切换时大概率卡住 —— 因为媒体查询响应有延迟，而 JS 可以立刻同步状态。
正确分工：
- CSS 只负责“抽屉怎么动”：定义
.sidebar--open { transform: translateX(0); } - JS 只负责“该不该用抽屉”：用
window.matchMedia('(max-width: 767px)')判断，只在真小屏下切换类名 - 大屏下直接覆盖为
transform: none; position: static; width: 280px;，并移除所有transition，避免鼠标悬停误触动画 - body 溢出必须锁死：
document.body.style.overflowX = 'hidden'打开时设，关闭后设为空字符串（不是'auto'），否则 Safari 会残留 scrollX 导致页面错位
最易被忽略的是：遮罩层的 pointer-events: auto 必须在打开时显式设置，关闭后重置为 none；漏掉这一句，用户点第一次没反应，点第二次才关，体验直接降级。
