iOS Safari 中 iframe 滚动必须外层 div 设置 overflow-y: auto 和 -webkit-overflow-scrolling: touch；viewport 在 iframe 内无效，需父页控制响应式或用 scale 布局；首次卡顿主因资源阻塞，应懒加载+IntersectionObserver；跨域高度自适应须子页 onload 后 postMessage 并校验 origin。
移动端 iframe 外层容器必须加 -webkit-overflow-scrolling: touch
不加这个属性，iOS Safari 里 iframe 内容根本滚不动，或者一碰就卡死。它不是可选项，是 iOS 上滚动生效的硬性前提。但要注意：这个属性在 iOS 12–14 有副作用——会削弱原生“回弹”感，松手后滚动距离变短、减速过快。如果你的产品必须保留自然弹性，得在 iOS 15.4+ 设备上才敢放心用。
写法必须是：
<div style="overflow-y: auto; -webkit-overflow-scrolling: touch;"> <iframe src="..."></iframe> </div>
-
overflow-y: auto或scroll必须显式设置，仅靠-webkit-overflow-scrolling不会触发滚动条 - 不能只给
iframe自身加，必须套一层div容器再设样式 - 若容器父级有
overflow: hidden或transform，会干扰滚动区域判定，导致失效
iframe 内部页面的 viewport 在 iOS 下基本无效
你在 iframe 里写的 <meta name="viewport" content="width=device-width, initial-scale=1">，iOS Safari 会直接忽略。缩放、双指手势、字体渲染都会失常，进而引发卡顿。这不是 bug，是 WebKit 的限制策略。
真正有效的做法只有两个：
立即学习“前端免费学习笔记（深入）”；
- 把关键响应式逻辑提到父页控制：比如用
postMessage让子页监听父页window.innerWidth变化，动态调整根元素font-size或容器宽度 - 放弃 iframe 内部做 viewport 适配，改用固定比例布局（如
aspect-ratio: 16/9）+ CSS 缩放（transform: scale(0.8)），并配合transform-origin控制锚点
别试 iframe { width: 100%; height: 100vh } 这类写法——移动端 WebView 对 iframe 高度计算极不稳定，容易触发重排抖动。
首次加载卡顿不是滚动问题，而是资源阻塞主线程
用户第一次滑到 iframe 区域时卡住，大概率不是滚动本身慢，而是 iframe 正在同步加载 JS/CSS/图片，把浏览器主线程占满了。iOS 尤其明显，因为它的 JavaScriptCore 线程调度更保守。
解决路径很明确：
- 删掉 iframe
src里的随机参数（如?t=1712345678），否则缓存失效，每次都是新请求 - 主页面用
IntersectionObserver监听 iframe 进入视口（threshold: 0.2），进入前 20% 就开始加载，别等完全出现 - 加载中显示 skeleton 占位图，避免白屏引发误操作；加载完成后立即调用
observer.unobserve(iframe)，防止重复触发 - 如果 iframe 是自有页面，内部必须加
loading="lazy"到图片、<script defer>、<link rel="preload">，否则优化只做了一半
跨域 iframe 高度自适应失败会导致滚动错乱
移动端 iframe 高度不准，最常见表现是：能滚、但滚几下就卡住，或者内容被截断、底部留大片空白。这通常是因为你用了 iframe.contentDocument.body.scrollHeight，但在 iOS WKWebView 中，跨域时该值为 null，且不报错，静默失败。
正确做法只有一条：子页主动发 postMessage，父页严格校验 event.origin 后更新高度。
子页代码（必须放在 window.onload 后）：
window.onload = () => {
const height = document.documentElement.scrollHeight;
window.parent.postMessage({ type: 'iframeHeight', height }, 'https://yourdomain.com');
};
父页接收时必须检查 origin，不能用 '*'：
window.addEventListener('message', (e) => {
if (e.origin !== 'https://widget.example.com') return;
if (e.data.type === 'iframeHeight') {
iframe.style.height = e.data.height + 'px';
}
});
漏掉 window.onload 或 origin 校验，iOS 上高度永远拿不到——这不是兼容性问题，是安全机制强制拦截。
