iOS 7 Safari:当点击/关注HTMLinput时,OSlocking4秒钟

更新:这个问题似乎源于在页面上有许多select元素。 那是多么的随意?

所以这是问题。 在iOS 7 Safari上,点击我网站上的文本input时,键盘会打开,然后冻结操作系统大约2-5秒钟,然后滚动到input。 发生这种情况一次后,直到刷新页面才再次发生。 我已经找遍了所有的地方,是的,iOS 7的Safari是超级越野车,但让我们试试看,如果我们能弄清楚这一点。

注意:这不会发生在其他任何移动浏览器或任何以前的iOS Safari。 它发生在iOS 7和iPhone 7的iPad上。

我将列出我的朋友和我迄今尝试过的一切:

  • 删除了在jQuery中添加事件处理程序的function。 (注意:除了卸载和onpageshow,我们所有的事件处理程序都是通过jQuery分配的)。
  • 从input中删除了jQuery自动完成脚本。
  • 从input中删除了所有JavaScript。
  • 通过拒绝Mac上的域,删除了页面上添加的所有第三方库。
  • 切换回以前的jQuery版本。 在没有任何工作之前,我们可以使用的最后一个是1.7.0。
  • 切换回以前的jQuery UI版本。
  • 将input事件处理更改为委托和实况,而不是(单击)
  • 删除了所有的CSS类。
  • 从页面中删除了所有的CSS。 注意:操作系统的响应时间下降到1-2秒,但仍然发生。

有没有人有任何想法?

谢谢一堆!

(有一些有效的解决scheme,请参阅列表的末尾)

在我的公司,我们也遭受了这个苦难。 我们向苹果提出了一个问题,但听到妈妈。

这里有一些有趣的jsfiddles来帮助说明一些问题,它似乎绝对围绕隐藏字段的数量,并且textareas似乎不受影响。

从debugging的努力,我的猜测是,有一些function试图检测input是否是信用卡或电话号码或某种似乎导致locking行为的特殊types。 尽pipe这只是一个假设..

概要:

在标有“display:none”的容器内的一个包含名为input元素的表单的页面上,首先按下这个表单的input,在键盘出现和input被聚焦之间有一个非常明显的延迟(20sec-2min) 。 这可以防止用户使用我们的networking应用程序,因为用户花费了大量的时间等待键盘响应。 我们已经在各种情况下对其进行了debugging,试图识别正在发生的事情,这似乎是iOS7parsingDOM的方式与iOS6上的方式的变化,而iOS6没有这些问题。

通过在Safari Inspector中debuggingiPad与iPad连接,我们发现iOS7提供了更多关于(程序)活动的信息,以至于我们发现_CollectFormMetaData是问题的母体。 search元数据会导致大量的stream失,并伴随着包含input的隐藏容器数量的增加。 我们发现_isVisible和_isRenderedFormElement被称为远远超过他们应该合理。 此外,如果有帮助,我们发现一些与信用卡和地址簿有关的检测function是大量的时间消费者。

这里是一些jsFildles的插图。 请在运行iOS6的iPad上在Safari上查看,然后在运行iOS7的iPad上查看:

http://jsfiddle.net/gUDvL/20/ – 在两者上运行都很好

http://jsfiddle.net/gUDvL/21/ – 在iOS 7上明显的延迟

http://jsfiddle.net/gUDvL/22/ – 在iOS 7上更明显的延迟

http://jsfiddle.net/gUDvL/29/ – 在iOS 7上非常明显的延迟

http://jsfiddle.net/gUDvL/30/ – 与29相同,但没有隐藏 – 在iOS 7上没有任何延迟

http://jsfiddle.net/gUDvL/38/ – 与29相同,但进一步恶化

http://jsfiddle.net/gUDvL/39/ – 99个隐藏的input,一个可见,一个单独可见

http://jsfiddle.net/gUDvL/40/ – 隐藏的textareas,一个可见的,一个单独可见

http://jsfiddle.net/gUDvL/41/ – 99隐藏的input,一个可见,一个单独可见,所有的autocomplete =“off”属性

http://jsfiddle.net/gUDvL/42/ – 99个隐藏的input,一个可见,一个单独可见。 由绝对位置隐藏,而不是显示。

http://jsfiddle.net/gUDvL/63/ – 与gUDvL / 43 /相同,但自动完成,自动更正,autocapitalize和拼写检查closures

http://jsfiddle.net/gUDvL/65/ – 与gUDvL / 63 /相同,但清理缩进(在iPad上似乎较慢)

http://jsfiddle.net/gUDvL/66/ – 与gUDvL / 65 /相同,但显示没有通过css而不是DOMReady jQuery

http://jsfiddle.net/gUDvL/67/ – 与gUDvL / 66 /相同,但使用TedGrav的焦点/模糊技术

http://jsfiddle.net/gUDvL/68/ – 与gUDvL / 66 /相同,但是用css驱动的文本缩进而不是显示:块再次(明显的改进 – 缩小到2-3秒的初始焦点)

http://jsfiddle.net/gUDvL/69/ – 与gUDvL / 68 /相同,但TedGrav的焦点/模糊重新添加

http://jsfiddle.net/gUDvL/71/ – 与gUDvL / 66 /相同,但js在每个input之前添加一个图例标签。 (明显改善 – 初始焦点减less到2-3秒)

<input type="text" autocomplete="off" /> (links to jsfiddle.net must be accompanied by code..) 

(我们应该注意到,使用Safari的debugging器将iPad连接到Mac,戏剧性地强调了延迟。)

重现步骤:

  1. 在iPad上加载上述任何jsfiddles
  2. 按一个input来获得焦点
  3. 看屏幕,直到你可以键入

预期成绩:

预计能够在popup键盘时立即键入

实际结果:

观看键盘popup,屏幕冻结,无法滚动或与Safari浏览器进行一段时间的交互。 在持续时间之后,焦点按预期给出。 从那时起,在注意力投入的时候就不会有进一步的冻结。

tl;博士技术总结

总的来说,有几个来自各种答案的build议修复:

  • 不要使用display:none来隐藏div – 使用类似于text-indent的东西
  • 苹果公司的元数据扫描逻辑短路 – 许多表单标签或图例标签似乎是伎俩
  • 自动对焦/模糊 – 没有为我工作,但有两个人报告它做到了

苹果相关的线程:

https://discussions.apple.com/thread/5468360

IOS如何处理input和textareas的触摸事件似乎有问题。 当DOM变大时延迟变大。 然而,焦点事件没有问题!

要解决此问题,您可以覆盖touchend事件并将焦点设置为input / textarea。

 document.addEventListener("touchend", function (e) { if (e.target.nodeName.toString().toUpperCase() == 'INPUT' || e.target.nodeName.toString().toUpperCase() == 'TEXTAREA') { e.preventDefault(); e.target.focus(); } }); 

这会造成一个新的问题。 它会让你滚动页面,而触摸input/ textarea,但当你放手,网站将滚动回原来的位置。

为了解决这个问题,你只需要检查是否有滚动发生,并用if语句包围preventDefaulttarget.focus

要设置原始位置,您可以使用touchstart事件。

 document.addEventListener("touchstart", function (e) { ... //store the scrollTop or offsetHeight position and compare it in touchend event. } 

编辑我和一个同事已经改进了一点点,它的作品就像一个魅力。

 var scroll = 0; document.addEventListener("touchstart", function (e) { scroll = document.body.scrollTop; }); document.addEventListener("touchend", function (e) { if (scroll == document.body.scrollTop) { var node = e.target.nodeName.toString().toUpperCase(); if (node == 'INPUT' || node == 'TEXTAREA' || node == 'SELECT') { e.preventDefault(); e.target.focus(); if(node != 'SELECT') { var textLength = e.target.value.length; e.target.setSelectionRange(textLength, textLength); } } } }); 

我有相同的freezeing问题。

我不确定我们处于相同的情况。

这里是我的演示: http : //tedzhou.github.io/demo/ios7sucks.html

在我的页面中,我使用了带有onclick属性的<p>元素作为button 。 当用户点击button ,页面切换到一个textarea 。 然后点击它将冻结浏览器。

冻结的时间花在了dom元素的数量上。 在我的页面中,有10000个元素,使它冻结了10多秒。

我们可以通过将<p>元素切换到真正的<button>来解决问题,或者减lessdom元素的数量。

ps:对不起我的英文不好。 大声笑

在这个问题中,也是在插入/删除包含单个input元素的页面的ios全屏幕中挣扎着。 在页面上(以及整个DOM内)只有一个可见的文本input元素时,延迟时间长达30秒。 其他dynamic插入的页面,在同一个webapp中有单个或多个文本input,没有遇到input延迟。 像其他人所提到的那样,在最初的延迟之后,input字段在后续焦点事件上将正常运行(即使包含input元素的dynamic页面已经从DOM中移除,然后被dynamic地重新渲染/插回到DOM中)。

基于上述行为的预感,在页面加载时尝试了以下内容:

$( “#问题input”)专注(); $( “#问题input”)模糊();

虽然以上立即执行,但最终的结果是当input通过用户交互获得焦点时没有后续的延迟。 无法解释这个工作背后的原因,但似乎一贯为我的应用程序工作,而其他build议的修复失败。

我的主要问题是隐藏的领域。 使forms挂起10-15秒。

我设法摆脱屏幕隐藏的表单域。


隐藏:

 position: absolute; left: -9999px; 

以显示:

 position: relative; left: 0; 

在具有许多input的相当复杂的应用程序中遇到相同的问

通过USB连接debugging器到Safari iOS7,并logging用户界面事件。 当我点击textarea(或任何input)时,我会看到“touchend”事件,在10-20秒之后,我看到“click”被调度。

很明显,这是一个在萨法里像其他设备,如Android或iOS6的错误,没有问题,同一个应用程序。

它不仅发生在iOS中,而且发生在Mac OS(Maverics)的Safari 7中,我发现问题发生在使用大量div标签在表单中包含input(或select)时:

 <div> <select>...</select> </div> <div> <select>...</select> </div> ... 

我改变了我的select布局,使用ul / li和fieldsets而不是div,并且freezze时间大大减less了。

 <ul> <li><select>...</select></div> <li><select>...</select></div> </ul> 

以下是jsfiddle中的两个示例:

冻结5秒钟

http://jsfiddle.net/k3j5v/5/

冻结1秒

http://jsfiddle.net/k3j5v/6/

我希望它可以帮助别人

对我来说,这个问题是由用户input隐藏在页面上display:none

我使用的解决方法:我display:none使用display:none隐藏input,而是使用了jQuery的detach()方法来准备隐藏所有未被使用的用户input。 然后在需要时append()input。

这样没有inputdisplay:none在第一次加载页面,所以没有延迟发生在初始用户交互。

我们公司有相同或相似的问题。 每当我们显示大量的下拉列表,然后用户点击一个下拉列表,IOS 7会冻结一两分钟的页面。 解冻之后,从这一点开始,一切都会正常工作。

这影响了所有的inputtypes。 大量的下拉菜单实际上隐藏在第一次加载 – 用户将启动显示的下拉菜单。 直到显示下拉菜单 – 一切都会正常工作。 一旦显示出来,下一个input点击,即使是正常工作的input,现在也会导致浏览器冻结。

正如其他人已经注意到的,似乎IOS 7在用户首次与input交互之后parsingDOM中的可见input时存在问题。 当元素/选项/ DOM的数量和/或复杂度更高时,冻结更加明显。

由于在初始的用户交互中它总是被冻结,所以我们决定在显示下拉列表后立即启动隐藏的用户操作。 我们创build了一个透明的button(它不能被隐藏 – 它必须被“显示”),并在用户打开下拉列表时立即点击它。 我们认为这会使IOS更快地parsingDOM,但是发现它实际上完全解决了这个问题。

我也遇到过这个问题,因为我注意到很多人仍然有这个问题,我想我会把我的解决scheme。

基本上我的解决scheme是服务器端的元素隐藏。 我的网页是ASP.NET,所以我用面板的input包裹我的div,并将这些面板设置为可见虚假。 这样,如果我点击一个inputSafari浏览器不能看到所有其他控件,因为他们是隐藏的服务器端。

当然,如果你想使这个工作有点像客户端jQuery你需要自动回发和更新面板的地方。 这个解决scheme需要努力,但仍然比实际尝试修复Safari浏览器更好。

希望这可以帮助。

我的答案可能略微偏离了主题,但是我在经过一些search之后确实到了这里,因为情况“感觉”类似。

问题:

我的问题感觉像是在iOSlocking,但不完全,因为页面上的其他元素仍然是互动的。 我有一个<input type="search" />元素,当我点击这个字段的时候,这个元素不会被聚焦。 但在屏幕上大约4-5次点击之后,它最终会得到关注。

附加信息:

我的项目是一个混合的应用程序:iOS应用程序内的WebView。 该网站是用Twitter Bootstrap构build的。

解:

我恰好也在元素上设置了autofocus属性。 我试图删除它,它的工作…没有更多的连续水龙头让领域的重点。

您是否尝试将“密码和自动填充”>“信用卡”closures到Safari设置? 这个操作后,它工作正常。 这不是最终的解决scheme,但也许是iOS上的问题的原因。