iOS 11.3设备（iPhone7/8+）内嵌iframe表单输入自动滚动问题

我之前碰到过一模一样的iOS 11.3 iframe表单滚动bug，简直头疼——毕竟这个版本的Safari（包括iOS上的Chrome，因为它用的是Safari内核）在处理iframe内表单焦点时，滚动计算逻辑有个离谱的漏洞。分享几个亲测有效的解决方案，按优先级来：

1. 替换iframe自身滚动为外层容器滚动 #

iOS对iframe原生滚动的支持一直有问题，尤其是旧版本。我们可以禁用iframe的滚动，把滚动逻辑交给外层的div容器，这样能规避大部分滚动计算错误：

• 给iframe添加scrolling="no"属性
• 在外层包裹一个div，设置明确高度、滚动属性，加上iOS特有的平滑滚动样式
  示例代码：

<div style="height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch;">
  <iframe ng-src="myUrl" ng-if="model.sea..." scrolling="no" style="width: 100%; height: 100%; border: none;"></iframe>
</div>

2. 监听焦点事件，强制修正滚动位置 #

如果iframe内部页面是你可控的（同源），可以在内部页面添加JS监听，当输入元素获得焦点时，手动把页面滚动到元素可见位置，覆盖浏览器的错误滚动：

// 给所有文本输入框、文本域绑定焦点事件
document.querySelectorAll('input[type="text"], input[type="email"], input[type="password"], textarea').forEach(inputEl => {
  inputEl.addEventListener('focus', function() {
    // 加100ms延迟，等浏览器错误滚动完成后再修正
    setTimeout(() => {
      this.scrollIntoView({ behavior: 'auto', block: 'center' });
    }, 100);
  });
});

如果是跨域iframe，这个方法没法用，只能靠CSS/属性调整。

3. 调整视口与字体大小，避免自动缩放干扰 #

iOS默认会在输入框字体小于16px时自动缩放页面，这会和iframe的滚动bug叠加，加重问题：

• 确保iframe内部页面的视口标签设置正确：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• 给所有输入元素设置不小于16px的字体：

input, textarea {
  font-size: 16px !important;
}

这能阻止iOS的自动缩放行为，减少滚动异常的触发概率。

4. 额外的小技巧 #

如果以上方法还没解决，可以试试给iframe添加allowtransparency="true"属性，或者把iframe的position设置为relative，有时候这些小调整能绕过iOS的渲染bug。

这些方案都是针对iOS 11.x的特定问题，后续iOS版本已经修复了这个iframe滚动bug，但如果需要兼容旧版本设备，这些方法应该能帮你解决问题。

内容的提问来源于stack exchange，提问作者Nikita Jajodia