【发布时间】：2013-10-18 12:15:18
【问题描述】：
帮助处理移动 safari/chrome 上 iframe 中令人发指的焦点事件。
目前正在开发一个 crm Web 应用程序，我们决定使用 iframe 来隔离客户端逻辑，以免丢失任何其他可能打开的表单上的工作/数据输入 - 我了解就其本身而言，足以引起过多的意见和辩论 - 这不是我要问的......
页面结构如下：
固定位置标题 固定位置左侧导航/菜单 定位主要内容
即
<body>
<nav id="header" style="position: fixed; left: 0; right: 0; top: 0; height: 50px;">
(...your imagination here...)
</nav>
<aside id="leftNav" style="position: fixed; left: 0; top: 50px; bottom: 0; width: 225px">
(...even
</aside>
<section id="mainContent" style="position: fixed; left: 225px; top: 50px; right: 0; bottom: 0; overflow: auto; -webkit-overflow-scrolling: touch">
<div id="loadingImage"></div>
<iframe id="frame_1" style="position: absolute; height: 100%; width: 100%" src="..."></iframe>
</section>
</body>
我禁用了 touchmove 事件，但 #mainContent 仍然可以滚动。我遇到的问题是（在 mobile-safari 中）当用户触摸呈现在顶部折叠下方的输入时（据我所知），显示键盘并且主要部分将输入滚动到视图中 - 仅，它没有......看到这是我开始考虑喝酒的时候......可滚动元素似乎“反弹”屏幕导致它重新绘制 - 然后将主要部分滚动到顶部，隐藏选定的输入 - 或在极少数情况下，实际上会在小于 scrollTop 值的坐标处触发点击事件（向下滚动 300 像素，点击了一个输入，但现在选择了高于其 300 像素的输入...）。
在 iPad 上使用 chrome 打开同一个站点...打破百加得 - 似乎没有任何工作...
我快疯了，在我 5 年的职业生涯中，我第一次拼命寻求帮助…… iframe 是否会成为浏览器负面关注的焦点？我们应该重新考虑我们的客户端结构吗？任何想法将不胜感激
-马特
【问题讨论】：
-
因此，经过一番磕磕绊绊，如果没有答案，我似乎还有更多信息……看来可滚动标签需要一个最小高度才能使滚动不反弹。 iframe 是使用“显示：无”创建的；所以我猜mobile-safari需要父元素的scrollHeight（它正在滚动），但这由iframe决定......将显示设置为阻止，以及“可见性：隐藏”以及设置iframe最小值的onload事件-height（计算滚动标签的 scrollHeight）似乎正在工作 - 至少在 mobile-safari 上，chrome 仍然被顶起......
标签： google-chrome mobile iframe focus mobile-safari