iOS 7 Safari：单击/聚焦HTML输入时，操作系统会锁定4秒钟 [英] iOS 7 Safari: OS locks up for 4 seconds when clicking/focusing on a HTML input

问题描述

更新：问题似乎源于页面上有许多选择元素。这有多随意？

所以这就是问题所在。在iOS 7 Safari上，当点击我网站上的文本输入时，键盘会打开然后将操作系统冻结约2-5秒，然后最终滚动到输入。发生这种情况后，在刷新页面之前，它永远不会再发生。我到处都看了，是的，iOS 7 Safari是超级越野车，但我们试着看看我们是否可以解决这个问题。

So here's the issue. On iOS 7 Safari, when tapping the a text input on my site, the keyboard opens then freezes the OS for about 2-5 seconds then finally scrolls to the input. After this happens once, it never happens again until you refresh the page. I've looked all over the place, and yes, iOS 7 Safari is super buggy, but lets try and see if we can figure this out.

注意：这不会发生在任何其他移动浏览器或任何以前的iOS Safari中。它发生在ios 7 iphone和ios 7 ipad上。

Note: This does not happen in any other mobile browser or any previous iOS Safari. It happens both on the ios 7 iphone and ios 7 ipad.

我将列出我和朋友到目前为止所做的一切：

I will list everything my friend and I have tried so far:

• 删除了在jQuery中添加事件处理程序的功能。 （注意：我们所有的事件处理程序都是通过jQuery分配的，除了unload和onpageshow）。


• 从输入中删除了jQuery自动完成脚本。


• 已删除来自输入的所有JavaScript。


• 通过拒绝Mac上的域删除了页面上添加的所有第三方库。


• 切换回以前的jQuery版本。在没有任何工作之前我们实际可以使用的最后一个是1.7.0。


• 切换回以前的jQuery UI版本。


• 将输入事件处理更改为委托和生活，而不是（'点击'）


• 删除所有CSS类。


• 从页面中删除所有CSS。注意：操作系统的响应时间减少到1-2秒但仍然发生。

• Removed the ability to add event handlers in jQuery. (Note: all our event handlers are assigned through jQuery except for unload and onpageshow).
• Removed the jQuery autocomplete script from the inputs.
• Removed all JavaScript from the inputs.
• Removed all third-party libraries being added on the page by rejecting the domains on the Mac.
• Switched back to previous jQuery versions. The last one we could actually use before nothing worked was 1.7.0.
• Switched back to previous jQuery UI versions.
• Changed input event handling to delegate and live, instead of on('click')
• Removed all CSS classes.
• Removed all CSS from the page. Note: The response time for the OS this went down to 1-2 seconds but still happened.

有没有人有任何想法？

非常感谢！

推荐答案

（有一些有效的解决方案，请参阅列表末尾附近）

(There are some somewhat-effective solutions, see near the end of the list)

在我公司，我们也受此影响。我们向Apple提出了一个问题，但是听到了妈妈。

At my company we are also suffering from this. We filed an issue with Apple but have heard mum.

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

Here are some interesting jsfiddles to help illustrate some of the issues, it definitely seems to revolve around the number of hidden fields, and textareas do not seem to be affected.

从调试工作来看，我的猜测是有一些功能试图检测输入是信用卡还是电话号码或一些似乎导致锁定行为的特殊类型。这只是一个假设..

From debugging efforts, my guess is that there is some functionality trying to detect if an input is a credit card or phone number or some special kind which seems to cause the locking behavior. This is just one hypothesis though..

摘要：

在页面上如果表单中包含标记为display：none的容器内的命名输入元素，则第一次按下该表单的输入会在键盘出现和输入被聚焦之间有非常明显的延迟（20秒-2分钟）。这可以防止用户使用我们的网络应用程序，因为ui冻结等待键盘响应的时间很长。我们已经在各种场景中对其进行了调试，以尝试识别正在发生的事情，这似乎是因为iOS7解析DOM的方式与iOS6上的方式有所不同，而iOS6没有这些问题。

On a page with a form containing named input elements inside containers that are marked "display: none", the first press on an input in that form has a very noticeable delay (20sec-2min) between the keyboard coming up and the input being focused. This prevents users from using our web app due to the enormous time spent with the ui frozen waiting for the keyboard to respond. We have debugged it in various scenarios to try and discern what is going on, and it appears to be from a change in how iOS7 parses the DOM versus how it did on iOS6, which has none of these issues.

通过连接iPad的Safari的Inspector中的调试，我们发现iOS7提供了有关（程序）活动的更多信息，我们发现_CollectFormMetaData是问题的父母。搜索元数据会导致大量流失，并且随着包含输入的隐藏容器的数量而增加。我们发现_isVisible和_isRenderedFormElement的调用远远超过了它们的合理范围。此外，如果它有帮助，我们发现一些与信用卡和地址簿有关的检测功能都是大量消费者。

From debugging within Safari's Inspector with the iPad connected, we found that iOS7 provides much more information about the (program)'s activities, to the point that we found that _CollectFormMetaData is the parent of the problem. Searching for meta data causes massive churn that increases more than linearly along with the number of hidden containers containing inputs. We found that _isVisible and _isRenderedFormElement are called far more than they reasonably should be. Additionally, if it helps, we found some detection functions relating to credit cards and address books were large time consumers.

这里有一些jsFiddles用于说明。请在运行iOS6的iPad上以及运行iOS7的iPad上的Safari中查看它们：

Here are some jsFiddles for illustration. Please view them in Safari on an iPad running iOS6 and then on an iPad running iOS7:

http://jsfiddle.net/gUDvL/20/ - 两者都运行良好

http://jsfiddle.net/gUDvL/20/ - Runs fine on both

http://jsfiddle.net/gUDvL/21/ - iOS 7上显着延迟

http://jsfiddle.net/gUDvL/21/ - Just noticeable delay on iOS 7

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

http://jsfiddle.net/gUDvL/22/ - More noticeable delay on iOS 7

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

http://jsfiddle.net/gUDvL/29/ - VERY noticeable delay on iOS 7

http://jsfiddle.net/gUDvL/30/ - 与29相同，但与没有隐藏 - iOS 7没有延迟

http://jsfiddle.net/gUDvL/30/ - Same as 29 but with none hidden - no delay on iOS 7

http://jsfiddle.net/ gUDvL / 38 / - 与29相同，但进一步加剧

http://jsfiddle.net/gUDvL/38/ - Same as 29 but further exacerbated

http ：//jsfiddle.net/gUDvL/39/ - 99个隐藏输入，一个可见，一个单独可见

http://jsfiddle.net/gUDvL/39/ - 99 hidden inputs, one visible, one separately visible

http://jsfiddle.net/gUDvL/40/ - 99个隐藏的textareas，一个可见，一个单独可见

http://jsfiddle.net/gUDvL/40/ - 99 hidden textareas, one visible, one separately visible

http://jsfiddle.net/gUDvL/ 41 / - 99个隐藏输入，一个可见，一个单独可见，所有
与autocomplete =off属性

http://jsfiddle.net/gUDvL/41/ - 99 hidden inputs, one visible, one separately visible, all with the autocomplete="off" attribute

http://jsfiddle.net/gUDvL/42/ - 99个隐藏的输入，一个可见，一个可见。绝对位置隐藏而不是显示位置。

http://jsfiddle.net/gUDvL/42/ - 99 hidden inputs, one visible, one separately visible. Hidden by position absolute and left instead of display.

http：// jsfiddle。 net / gUDvL / 63 / - 与gUDvL / 43 /相同，但具有自动完成，自动更正，自动调整和拼写检查

http://jsfiddle.net/gUDvL/63/ - Same as gUDvL/43/ but with autocomplete, autocorrect, autocapitalize, and spellcheck off

http://jsfiddle.net/gUDvL/65/ - 与gUDvL / 63 /相同，但有缩小的缩进（在iPad上显得比较慢）

http://jsfiddle.net/gUDvL/65/ - Same as gUDvL/63/ but with cleaned up indentation (seems slower on iPad)

http://jsfiddle.net/gUDvL/66/ - 与gUDvL相同/ 65 /但显示无来自css而不是DOMReady jQuery

http://jsfiddle.net/gUDvL/66/ - Same as gUDvL/65/ but with display none via css again instead of DOMReady jQuery

http： //jsfiddle.net/gUDvL/67/ - 与gUDvL / 66 /相同，但使用TedGrav的焦点/模糊技术

http://jsfiddle.net/gUDvL/67/ - Same as gUDvL/66/ but with TedGrav's focus/blur technique

http://jsfiddle.net/gUDvL/68/ - 与gUDvL / 66 /相同，但使用css驱动的text-indent而不是display：block再次（明显改善 - 初始焦点减少到2-3秒）

http://jsfiddle.net/gUDvL/68/ - Same as gUDvL/66/ but with css driven text-indent instead of display:block again (noticeable improvement - reduction to 2-3 secs for initial focus)

http://jsfiddle.net/gUDvL/69/ - 与gUDvL /相同68 /但随着TedGrav的重点/模糊重新添加

http://jsfiddle.net/gUDvL/69/ - Same as gUDvL/68/ but with TedGrav's focus/blur re-added

http：// jsfiddle .net / gUDvL / 71 / - 与gUDvL / 66 /相同，但js在每次输入之前添加了一个图例标记。 （显着改善 - 初始焦点减少至2-3秒）

http://jsfiddle.net/gUDvL/71/ - Same as gUDvL/66/ but with js adding a legend tag before each input. (noticeable improvement - reduction to 2-3 secs for initial focus)

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

（我们应该注意到使用Safari调试器连接到Mac的iPad大大强调了延迟。）

(We should note that having the iPad connected to a Mac with Safari's debugger engaged dramatically emphasizes the delays.)

重现步骤：

1. 在iPad上加载上述任何一个jsfiddles


2. 按输入来获得焦点


3. 观看屏幕，直到您可以输入

预期结果：

键盘弹出后可以立即键入

Expect to be able to type as soon as the keyboard pops up

实际结果：

观看键盘弹出和屏幕冻结，无法滚动或与Safari交互一段时间。在持续时间之后，焦点按预期给出。从那时起，在关注投入时不会出现进一步的冻结。

Watch the keyboard pop up and the screen freeze, unable to scroll or interact with Safari for a duration. After the duration, focus is given as expected. From then on no further freezes are experienced when focusing on inputs.

tl; dr技术摘要

总的来说，从各种答案中提出了一些修正建议：

So overall there are a couple proposed fixes from various answers:

• 不要使用display：none隐藏div使用类似文本缩进的内容


• 短路Apple的元数据扫描逻辑 - 许多表单标签或图例标签似乎都可以解决问题


• 自动对焦/模糊 - 没有为我工作，但有两个人报告它确实

Apple的相关主题：

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

这篇关于iOS 7 Safari：单击/聚焦HTML输入时，操作系统会锁定4秒钟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！