overflow-y: scroll在手机上卡顿主因是浏览器未将其识别为可滚动图层，未启用gpu加速；必须同时满足：ios加-webkit-overflow-scrolling: touch、跨端加transform: translatez(0)、安卓webview设setlayertype(hardware)。
为什么 overflow-y: scroll 在手机上卡顿
不是 JS 太多，也不是网络慢，而是浏览器默认没把它当“可滚动图层”处理——走的是软件合成路径，帧率掉到 20–30fps。关键在于：overflow: scroll 本身不触发 GPU 加速，必须手动创建合成层。
-webkit-overflow-scrolling: touch 必须加，且只对 iOS 有效
这是 iOS Safari 的滚动加速开关，不加它连惯性滚动都没有，transform: translateZ(0) 单独加也没用。安卓 WebView 完全忽略这个属性，所以不能只靠它跨端。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
-webkit-overflow-scrolling: touch必须写在设置了overflow-y: scroll或overflow: auto的容器上 - 不能写在
或根容器上，应限定在具体滚动区域（如<div class="list-wrapper">） <li>iOS 15+ 支持 <code>will-change: scroll-position，但旧版无效，别替代前者 - 别用
translate3d(0,0,0)替代——语义等价，但部分低版本 WebView 对translateZ(0)更敏感 - 如果容器高度由 JS 动态计算，确保样式生效时高度已确定，否则合成层可能被降级
- 避免父容器同时有
overflow: hidden+position: relative，这在硬加速下容易截断渲染输出 - 必须在
webView.loadUrl()之前调用：webView.setLayerType(View.LAYER_TYPE_HARDWARE, null) - 检查 XML 布局中是否写了
android:layerType="software"，删掉它 - 某些 Cordova / Capacitor 插件会自动设为 software，需查插件配置或 patch 源码
- Android 9+ 上若启用了
WebView.enableSlowWholeDocumentDraw()，也会退化为软件绘制，必须禁用
transform: translateZ(0) 是安卓和现代 iOS 的合成层触发器
它强制浏览器为该元素创建独立的 GPU 图层，但要注意：只加这一条，在 iOS 下仍可能卡顿，必须和 -webkit-overflow-scrolling: touch 配合使用。
安卓 WebView 还得关掉软件渲染层
即使 CSS 写对了，滚动还是卡，大概率是原生层禁用了 GPU 加速。Android WebView 默认可能启用了 layerType="software"，直接让所有 CSS 合成失效。
translateZ(0) 和 -webkit-overflow-scrolling: touch 看似简单，一旦顺序错、范围错、平台错，就完全失效。尤其注意安卓 WebView 的 setLayerType 调用时机，晚于 loadUrl 就等于没写。
