fixed抽屉抖动因重排重绘或滚动未禁用；transform卡顿因属性不“干净”；点击穿透因iOS事件处理缺陷；无障碍需焦点管理、ARIA属性和Esc监听。
fixed定位的抽屉为什么一拉就“抖”或“闪”？
因为 fixed 元素脱离文档流后，若内部内容触发重排（比如文字换行、图片加载），浏览器可能在 transform 动画中同步重绘，造成视觉跳动。更常见的是没关掉默认滚动——父容器或 body 仍可滚动，导致抽屉位移错乱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给抽屉容器加
overflow: hidden，同时给body加overflow: hidden（打开时）和overflow: auto（关闭时） - 确保抽屉元素设了
will-change: transform，触发 GPU 加速（尤其在低端安卓机上明显） - 避免在抽屉内放
position: absolute且依赖视口尺寸计算的子元素——fixed下它们的“视口”行为可能不一致
transform: translateX() 拉出时为何卡顿或不跟手？
直接用 left 或 margin-left 动画会触发重排，而 translateX() 是合成属性，但前提是它得“干净”：不能和会触发重排的属性共存，也不能被其他 CSS 规则意外覆盖。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 抽屉元素必须设
transform: translateX(100%)初始态（完全隐藏），而不是display: none或visibility: hidden——后者会让transform动画失效 - 动画用
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)，别用ease-in-out，它在起止点减速太猛，手感发“粘” - 如果用 JS 控制开关，别直接改
style.transform，优先用 class 切换（如.drawer--open），否则 React/Vue 的 diff 可能打断动画帧
移动端点击穿透（click-through）怎么破？
抽屉盖住底层内容后，手指快速点击，底层按钮仍被触发——这不是 bug，是 iOS Safari 和部分安卓 WebView 对 fixed + 半透明遮罩层的事件冒泡处理缺陷。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 遮罩层（overlay）必须设
pointer-events: auto，抽屉本体设pointer-events: auto，但关闭状态下遮罩层要设pointer-events: none（否则点不到背后的关闭按钮） - 更稳的做法：抽屉打开时，在
body上加一个空的div作为“事件拦截层”，z-index 比遮罩略低，但pointer-events: auto+height: 100vh+width: 100vw - 禁用
touch-action: manipulation在遮罩层上，否则 iOS 可能跳过click事件直接触发tap，导致穿透
如何让抽屉支持键盘焦点与屏幕阅读器？
纯视觉交互的抽屉对键盘用户和读屏软件是黑洞——按 Tab 会跳过整个抽屉，关闭后焦点丢失，SR 不知道当前在哪。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 抽屉打开时，用
document.activeElement记录原焦点元素，关闭后.focus()回去；首次打开时，把焦点设到抽屉内第一个可聚焦元素（如button或input） - 抽屉容器加
role="dialog"和aria-modal="true"，遮罩层加aria-hidden="true"（抽屉打开时） - 监听
Escape键关闭抽屉，并阻止默认行为；不要只靠onkeydown，用addEventListener('keydown', ...)绑定到document级，确保捕获及时
