1

帮助处理移动 safari/chrome 上 iframe 中令人发指的焦点事件。

目前正在开发一个 crm Web 应用程序，我们决定使用 iframe 来隔离客户端逻辑，以免导致任何其他可能打开的表单上的工作/数据输入丢失 - 我理解本身就足以引起过多的意见和辩论-这不是我要问的...

页面结构如下：

固定位置表头 固定位置 left-nav/menu 固定位置主要内容

IE

<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 是否会成为浏览器负面关注的焦点？我们应该重新考虑我们的客户端结构吗？任何想法，将不胜感激

-马特

4

1 回答 1

2

好的，事实证明，在 iframe 中呈现的元素的“-webkit-appearance：none”的 css 属性导致了问题 - 删除 css 似乎允许 iframe 的滚动高度现在正确调整，最终在焦点时不会弹跳事件被触发......我会说它不是防弹的 - 每一次它都会变得“疯狂”，但我们在开玩笑......我有一个 iPad，所以我的孩子可以玩愤怒的小鸟，而不是真的与“工作”相关的任何事物；

: ~ )

-马特

于 2013-10-16T19:22:56.890 回答