Question

帮助在移动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值的情况下触发点击事件（向下滚动300px，点击一个输入，但现在选择了输入300px以上......）。

在iPad上使用chrome打开同一个网站...打破bacardi - 似乎没什么用......

我生气了，在我的5年职业生涯中，我第一次拼命寻求帮助...... iframe是否成为浏览器负面关注的焦点？我们应该重新考虑客户端结构吗？任何想法将不胜感激

-Matt

Answer 1

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

：〜）

-matt

移动浏览器中的iframe因焦点问题而中断

1 个答案: