details内容区滚动卡顿的根本原因是内部滚动容器未正确配置，而非details标签本身；需为子元素设置-webkit-overflow-scrolling: touch、overflow-y: auto及明确高度，并确保passive事件监听与合成层正常。
details内容区滚动卡顿，根本不是details的问题
滑动不顺畅和details标签本身无关，真正卡顿的是它内部的滚动容器（比如div或section）没配好滚动策略。iOS Safari 对普通 overflow-y: scroll 的滚动线程调度很保守，手指一抬就停，毫无回弹感——这不是 bug，是 WebKit 为兼容旧渲染管线做的默认降级。
- 别在
details上直接设overflow，它只是语义容器，不是滚动层 - 确保可滚动内容被包裹在独立子元素里，例如：
<details><summary>标题</summary><div class="scrollable-content">...</div></details> - 给这个子元素加
-webkit-overflow-scrolling: touch，且必须配合overflow-y: auto或scroll - 避免同时设
height: 100%和position: absolute/fixed—— Safari 会因布局计算延迟导致首次滚动卡住
iOS Safari 中 details 展开后内容无法滑动
常见现象是：点开 details，内容区域显示了，但手指划不动；或者能划几下就突然“粘住”，再点一下才恢复。这通常是因为父级或祖先元素触发了合成层中断，或滚动容器未获得独立图层。
- 给滚动容器加
transform: translateZ(0)或will-change: transform（注意：滚动结束 100ms 后应移除will-change） - 检查是否有
body或html被设了overflow: hidden，它会截断子级滚动事件流 - 微信 X5 内核（v8.0.4x 及更早）根本不支持
-webkit-overflow-scrolling，检测到MicromessengerUA 时，需降级为div + JS scrollTop控制 - 不要在滚动容器内放
video、iframe或自动播放媒体——它们持续占用主线程，间接拖慢滚动帧率
details + 滚动容器在微信里完全不响应触摸
微信 Android 版 X5 内核对 details 标签解析极弱，很多版本直接跳过整个标签，连 DOM 节点都不创建；即使节点存在，toggle 事件也不触发，open 属性读写无效，更别说滚动了。
- 用
navigator.userAgent.includes('MicroMessenger')做 UA 检测，命中即切换渲染逻辑 - 降级结构示例：
<div class="accordion-item"> <button type="button" aria-expanded="false">标题</button><div class="accordion-content" aria-hidden="true">...</div> </div> -
button必须带role="button"和动态同步的aria-expanded，否则屏幕阅读器无法识别状态变化 - 滚动仍要靠
div.scrollable-content+-webkit-overflow-scrolling: touch，但此时它已脱离details语义，可自由控制
为什么加了 -webkit-overflow-scrolling: touch 还是卡
这个属性在 iOS 12–14 存在已知行为退化：开启后系统会禁用部分弹性系数，导致松手后滚动距离缩短、减速过快，甚至直接停住。它不是失效，而是“过于克制”。
- 确认是否在
scroll事件监听中调用了preventDefault()或修改了布局（如读取offsetHeight），这会强制同步布局，打断异步滚动线程 - 滚动回调务必加
{ passive: true }，否则 Chrome/Safari 会阻塞滚动等待 JS 执行 - 避免在滚动容器上设
filter、opacity或mask，这些属性会让合成层失效，回退到 CPU 渲染 - 真机测试时，打开 Safari 开发者工具 → “Timelines” 面板，录制滚动过程，重点看 “Layout” 和 “Raster” 是否频繁触发
details 展开后，其内容区若含大量 DOM 节点或未优化图片，滚动卡顿就不是 CSS 能解决的——得结合虚拟滚动或懒加载。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
