列表项父容器必须设position: relative且加overflow: hidden；否则absolute删除按钮会相对body错位堆叠，或滑出边界撑开布局、触发横向滚动、遮挡相邻项，并引发iOS Safari touch响应延迟等兼容性问题。
列表项父容器必须设 position: relative 且加 overflow: hidden
不设 position: relative，absolute 删除按钮会相对于 body 或最近已定位祖先定位，所有按钮堆在左上角；不加 overflow: hidden，滑动时按钮直接伸出边界，可能撑开布局、触发横向滚动条，甚至遮挡相邻项。
常见错误现象包括：滑动后右侧留白、按钮悬在列表外、松手回弹异常、iOS Safari 中 touch 事件响应延迟。
-
overflow: hidden必须加在列表项（如.item）上，不能只加在ul或body - 若列表项本身用了
transform（如translateZ(0)），会意外创建新的包含块，使absolute按钮相对它定位——这是旧版 Chrome/Firefox 和部分 Android WebView 的兼容性坑 - 推荐搭配
will-change: transform（仅在滑动中动态添加，滑动结束移除），防闪烁但避免全局滥用
right 初始值必须精确等于删除按钮宽度
删除按钮的 right 初始值不是随便填个负数，它必须精确等于按钮自身宽度（含 padding、border，不含 margin）。例如按钮 CSS 宽度为 60px，且 box-sizing: border-box，那就设 right: -60px；若误用 right: -100%，父容器宽度变化（比如横屏/字体缩放）时按钮立刻错位。
- 用 CSS 变量统一管理：
--delete-width: 60px，然后right: calc(-1 * var(--delete-width)) - 避免给按钮设
width: 100%或max-width，否则计算宽度不可靠 - 图标内文字或 SVG 若有
line-height或vertical-align，视觉上会偏移，建议用display: flex; align-items: center; justify-content: center居中，而非依赖top: 50%+transform: translateY(-50%)
内容层不要设 position: absolute，用 transform 移动
内容区域（文字、图片等）保持默认 static 或显式设 position: relative 即可。靠 JS 控制其 style.transform = 'translateX(-60px)' 移动，比改 left 或 margin 更性能友好，也不影响文档流。
立即学习“前端免费学习笔记（深入）”；
- 强行给内容层加
absolute会导致：文本无法选中、键盘焦点丢失、屏幕阅读器跳过、iOS Safari 中touchstart响应异常 -
transform触发硬件加速，滑动更流畅；而left或margin会频繁触发重排（reflow），尤其在低端安卓机上卡顿明显 - 过渡效果必须写全：
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)—— 这个贝塞尔曲线比默认的ease更跟手
iOS Safari 下 overflow: hidden 失效的典型原因和解法
iOS Safari 对 overflow: hidden 的行为有特殊限制：当父容器没有明确的 height 或 max-height，且未触发层叠上下文时，该声明可能完全被忽略，导致内容溢出可见。
- 必须给父元素设置显式的高度约束，比如
height: 200px或max-height: 200px，仅靠flex布局撑高不够 - 加
transform: translateZ(0)或will-change: transform强制创建层叠上下文，是 iOS 下最稳定的兜底手段 - 避免在
body或html上直接设overflow: hidden—— Safari 会无视它，改用position: fixed+top: 0等替代方案更可靠 - 若容器内有图片或字体加载后撑开尺寸，需在加载完成后再应用
overflow: hidden，否则初始渲染时可能已触发滚动条占位
真实项目里最容易被忽略的，是「滑动过程中 transform 和框架响应式更新冲突」——比如 Vue/React 重新 render 会清空 DOM 上的 style.transform，菜单“啪”一下弹回。这得靠状态同步或 ref 缓存来兜底，不是加个 class 就能解决的。
