iPad Safari 中 iframe 条款不显示是因自动滚动限制、height 计算异常及 CORS/MIME 拦截；应改用 fetch+innerHTML 注入并设 webkitOverflowScrolling: touch 和固定高度，配合 requestAnimationFrame 调用 scrollIntoView。
iPad 上用 HTML5 显示合约条款时内容“隐藏”或“不显示”，通常不是 HTML5 本身限制，而是 Safari 对 iframe、scroll、overflow 和 viewport 的严格处理导致的——尤其在 iOS 13+ 后更明显。
为什么 iPad Safari 里 iframe 加载的条款内容不显示？
iPad Safari 默认会阻止无用户手势触发的 iframe 自动滚动或渲染（尤其含 PDF 或长 HTML 文档），且对 height: 100%、min-height 等值计算异常敏感。常见现象是：页面空白、只显示顶部几行、滚动条消失、或控制台报 Failed to load resource（实际是 CORS 或 MIME 类型被拦截）。
- 确保条款文件（如
terms.html）与主页面同源；若跨域，必须服务端返回Access-Control-Allow-Origin: * - 避免用
—— iPad 不认这种相对高度，改用固定像素或vh单位 - PDF 直接嵌入
iframe时，Safari 可能拒绝渲染（尤其非 HTTPS 环境），优先转成 HTML 片段内联或用+data属性
用 fetch + innerHTML 替代 iframe 显式加载条款
绕过 iframe 渲染限制最稳的方式：AJAX 拉取 HTML 内容，注入到容器中，并手动初始化滚动支持。适合纯文本/结构化 HTML 条款。
const termsContainer = document.getElementById('terms-content');
fetch('terms.html')
.then(r => r.text())
.then(html => {
termsContainer.innerHTML = html;
// 强制 iPad 可滚动（关键）
termsContainer.style.overflowY = 'auto';
termsContainer.style.webkitOverflowScrolling = 'touch';
})
.catch(err => console.error('条款加载失败:', err));
-
webkitOverflowScrolling: touch必须显式设置，否则 iPad 滚动卡顿或失效 - 容器元素（
#terms-content）需有明确height或max-height，不能仅靠min-height - 如果条款含内联样式或
，注意 CSP 策略可能屏蔽innerHTML中的标签
iOS 16+ 下 scrollIntoView 失效导致条款“看不见”
用户点击“查看条款”按钮后，内容已加载但视口未定位到目标区域，看起来像“没显示”。这是因为 iOS Safari 对 scrollIntoView({ block: 'start' }) 的兼容行为变化。
- 不要依赖默认
scrollIntoView()，改用带behavior: 'smooth'的显式调用 - 确保目标容器已渲染完成（可用
requestAnimationFrame延迟滚动） - 若条款在 modal 中，modal 容器自身也要设
overflow: hidden，否则滚动会作用于 body
document.getElementById('show-terms-btn').addEventListener('click', () => {
document.getElementById('terms-modal').classList.add('visible');
requestAnimationFrame(() => {
document.getElementById('terms-content').scrollIntoView({
behavior: 'smooth',
block: 'start'
});
});
});
真正卡住的点往往不在“怎么导入”，而在“导入后 Safari 是否允许它被看见”——iOS 对滚动上下文、渲染时机、CSS 高度继承的判断比桌面端苛刻得多。多试一次 webkitOverflowScrolling 和 requestAnimationFrame 套娃，比换框架更管用。
