侧边栏抽屉用 transform: translateX() 是因它触发硬件加速、不触发重排，动画更流畅；而 left 或 margin-left 会引发重排导致卡顿，尤其在旧版 Safari 和安卓 WebView 中。
侧边栏抽屉为什么用 transform: translateX() 而不是 left 或 margin-left
因为 transform: translateX() 触发硬件加速（GPU 渲染），动画更流畅，且不触发重排（reflow）——而 left 改变布局位置、margin-left 会引发父容器重排，滚动卡顿明显，尤其在低端安卓 WebView 或旧版 Safari 中。
注意：必须搭配 will-change: transform（可选但推荐）或给抽屉加 backface-visibility: hidden 来进一步稳定渲染表现。
-
translateX(-100%)表示完全左移一个自身宽度，即“藏到屏幕外左侧” -
translateX(0)表示归位到原始位置（通常设为right: 0或left: 0的基准点） - 不要用
%基于父容器宽，而应基于抽屉自身宽 —— 所以需确保抽屉有明确width（如width: 280px），否则translateX(-100%)可能失效
如何用 class 切换控制抽屉显隐（无 JS 框架）
纯 CSS 方案依赖一个状态开关元素（比如隐藏的 <input type="checkbox">），用 :checked 伪类联动抽屉样式。比监听 click 事件更轻量，也避免 JS 初始化失败导致抽屉卡死。
关键结构：
立即学习“前端免费学习笔记（深入）”；
<input type="checkbox" id="sidebar-toggle" class="sidebar-toggle"> <label for="sidebar-toggle" class="sidebar-toggle-btn">☰</label> <aside class="sidebar">...</aside>
对应 CSS：
.sidebar {
position: fixed;
top: 0;
right: 0;
width: 280px;
height: 100vh;
background: #fff;
transform: translateX(100%);
transition: transform 0.3s ease-out;
will-change: transform;
}
.sidebar-toggle:checked ~ .sidebar {
transform: translateX(0);
}- 必须用
~（通用兄弟选择器），因为<input>和<aside></aside>是同级 -
transition写在默认状态上，而非:checked状态里，否则首次打开无动画 - 点击遮罩层关闭抽屉？加一个
<div class="sidebar-overlay"> 并放在 <code>input后面，同样用:checked ~ .sidebar-overlay控制opacity和pointer-eventstransform: translateX()在移动端 Safari 的兼容性坑iOS 12–14 的 Safari 对
transform动画有缓存 bug：当抽屉快速开合多次，translateX(0)可能“残留偏移”，表现为抽屉没完全贴右、留白或错位。- 临时修复：每次开/关前强制重绘，例如在 JS 切换 class 前加
el.style.transform = 'none'; void el.offsetWidth; el.style.transform = 'translateX(0)' - 更稳方案：改用
transform: translate3d(0, 0, 0)替代translateX()，Safari 对translate3d的渲染一致性更好 - 别用
transform: translateX(calc(-1 * var(--sidebar-width)))—— iOS Safari 对 calc + transform 的组合支持不稳定，尤其带单位混合时
抽屉内容滚动卡顿？别忘了
overscroll-behavior抽屉内滚动到底部再继续拖，会触发背后页面滚动（iOS 尤其明显），体验极差。这不是
translateX的问题，而是滚动穿透。解决只需一行：
.sidebar { overscroll-behavior: contain; }含义：阻止滚动事件溢出该容器。Chrome / Safari / Firefox 均支持，无需前缀。
- 若需兼容 iOS 12–13，可额外加
touch-action: pan-y防止误触发双指缩放 - 不要用
position: fixed+overflow: hidden在 body 上锁滚动 —— 页面会跳回顶部，且 Safari 的scrollRestoration行为不可靠
真正麻烦的是嵌套滚动和键盘弹起时的 viewport 变化，那已经超出
translateX能力范围了。 - 临时修复：每次开/关前强制重绘，例如在 JS 切换 class 前加
