根本原因是浏览器对details展开/收起默认走软件渲染且触发强制同步布局，尤其ios safari和微信x5内核中dom变更引发重排、合成层失效及滚动锚点重置。
details 标签在手机端滑动卡顿，根本原因不是它本身慢，而是浏览器对它的展开/收起动画默认走软件渲染路径，且触发了强制同步布局——尤其在 iOS Safari 和微信内置 WebView 中，summary 点击后 DOM 变更会连带重排整个 details 内容区，导致滚动帧率骤降。
为什么 details 在移动端一滚动就卡
iOS Safari 对 details 的实现存在两个隐藏陷阱：一是展开时内部内容高度从 0 → auto 的过渡无法用 CSS transition 控制（浏览器忽略），只能靠 JS 动态设 max-height；二是内容区若含图片、iframe 或未设 will-change，滚动时会频繁重绘。微信内核（X5）更严重——它把 details 当作普通块级元素处理，不启用独立合成层，导致整个父容器跟着一起“抖”。
- 实测现象：
details展开后，手指在内容区上下滑动，首帧延迟常超 60ms，Chrome DevTools 的 Performance 面板可见大量 Forced Reflow - 典型诱因：内容区用了
margin-top或padding-bottom，或内部有position: relative的浮动元素 - 兼容性雷区：Android Chrome 120+ 已支持
details[open] { transition: height 0.2s ease; }，但 iOS Safari 17.6 仍完全无视
用 max-height + overflow-hidden 替代原生展开逻辑
放弃依赖浏览器原生 open 切换，改用 CSS 控制高度过渡，并确保内容区脱离文档流。这是目前最稳定、iOS/Android/微信全兼容的方案。
- 给
details设固定最大高度（如max-height: 500px），内容区加overflow-y: hidden - 初始状态设
max-height: 0+opacity: 0，展开时改为max-height: 500px+opacity: 1，并加transition: max-height 0.25s ease, opacity 0.25s ease - 必须配合
will-change: max-height（仅在展开前动态添加，收起后移除），否则 iOS Safari 不提升图层 - 避免用
height: auto过渡——它无法被硬件加速，且会强制同步计算
修复微信 X5 内核的合成层失效问题
微信内置浏览器（X5）对 transform 和 will-change 的识别比 Safari 更弱，需额外加一层“欺骗”策略才能激活 GPU 合成。
- 在
details的直接子容器（即内容区外层div）上加transform: translateZ(0)和backface-visibility: hidden - 禁止给
details或其父容器设overflow: hidden——X5 会因此禁用合成，改用clip-path: inset(0)替代 - 若内容区含图片，务必加
loading="lazy"和显式width/height，否则图片加载会打断过渡动画 - 微信中点击
summary后立即滑动，仍有概率卡住：需在click回调末尾加setTimeout(() => window.scrollTo(0, 0), 0)强制触发一次合成刷新
别忽略 touch-action 和事件穿透
details 卡顿常被误判为渲染问题，实际可能是事件响应链被阻塞。尤其在弹层叠加场景下，summary 点击后若没正确处理 touch-action，会导致后续滚动被拦截。
- 给
summary显式设touch-action: manipulation，禁止浏览器等待双击缩放 - 若
details在position: fixed的弹层里，必须同时给弹层加touch-action: pan-y，否则 iOS 会禁用纵向滚动 - 微信中常见“点一下 summary，再滑动却没反应”：检查是否在
click里调用了event.preventDefault()或阻止了冒泡——details依赖原生事件传播来更新open状态 - 慎用
pointer-events: none临时禁用，它会让summary失去焦点，VoiceOver 用户无法操作
真正难处理的不是 details 本身，而是它和移动端滚动机制的耦合——展开后内容高度变化会重置滚动锚点，而浏览器又不保证这个重置是异步的。所以所有优化都得围绕“避免高度突变”和“强制图层分离”打转，没有银弹，只有层层补漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
