抽屉导航应优先用transform: translateX()而非position: fixed；因fixed会脱离文档流、引发错位和横向滚动，而transform不触发重排、支持硬件加速且便于配合overflow: hidden和可访问性控制。
抽屉导航用 position: fixed 还是 transform？
直接用 position: fixed 把侧边栏“钉死”在屏幕左侧，看似简单，但会破坏页面滚动体验：内容区域无法自然滚动，且抽屉盖住内容后，焦点和可访问性容易出问题。更稳妥的做法是用 transform: translateX(-100%) 隐藏，配合过渡动画控制显隐——它不脱离文档流，不影响页面布局，也更容易配合 overflow: hidden 封锁背景滚动。
- 隐藏状态设为
transform: translateX(-100%)，宽度建议固定（如width: 280px），避免 flex 布局下尺寸抖动 - 显示时改为
transform: translateX(0)，同时给body加overflow: hidden防止背景滚动 - 别忘了加
transition: transform 0.3s ease，否则切换生硬；ease比linear更符合用户直觉
怎么让点击遮罩层（overlay）关闭抽屉？
遮罩层不是装饰，而是关键交互锚点：它承接点击、支持键盘 Escape 关闭，还能防止用户误点背后内容。但很多人只加了 div.overlay 却没处理事件冒泡或 z-index 层级，导致点不关闭、或点到菜单项反而关掉了。
- 遮罩层必须放在抽屉同级或外层容器中，
z-index要高于抽屉（如抽屉是1000，遮罩设999，内容区设1） - 绑定
click事件时，确保 handler 在遮罩自身上触发，而非委托到 body —— 否则菜单项点击会冒泡触发关闭 - 加上
tabindex="-1"并在打开时focus()到遮罩，能让键盘用户按Tab不意外跳进背景内容
移动端 Safari 上抽屉滑动卡顿怎么办？
Safari 对非合成层动画敏感，尤其当抽屉里有图片、阴影或复杂 CSS（如 filter: drop-shadow()）时，transform 动画也可能掉帧。这不是代码写错了，而是渲染管线没被正确触发。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 强制开启硬件加速：给抽屉容器加
will-change: transform，或更稳妥地用transform: translateZ(0) - 避免在抽屉内使用
box-shadow或border-radius叠加过多层，它们会让 Safari 放弃图层合并 - 如果用了
overflow-y: auto滚动菜单项，记得加-webkit-overflow-scrolling: touch（iOS 15+ 已逐步弃用，但 iOS 12–14 仍需）
用 JavaScript 控制开关状态时，DOM 操作顺序很重要
状态不同步是新手最常遇到的“点了没反应”问题——比如按钮 class 改了，但抽屉没动；或者抽屉动了，遮罩却没显示。根源常在于 DOM 更新时机和 class 切换顺序。
立即学习“前端免费学习笔记（深入）”；
- 先操作 class（如给
body加drawer-open），再触发transform变化；反过来会导致浏览器跳过过渡动画 - 不要用
display: none/block控制抽屉显隐——它会中断 transition，应始终用visibility+transform组合 - 如果用
addEventListener('click')绑定多次，记得用removeEventListener清理，或用{ once: true }避免重复注册
抽屉导航真正难的不是展开收起，而是边界情况：快速连点、键盘与鼠标混合操作、Safari 的 scroll 锁定失效、屏幕阅读器对 aria-hidden 的读取时机。这些地方不写测试很难暴露，但上线后用户第一秒就感觉得到。
