iphone - iOS 7 Safari : OS locks up for 4 seconds when clicking/focusing on a HTML input

Question

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

所以问题来了。在 iOS 7 Safari 上，当点击我网站上的文本输入时，键盘打开然后卡住操作系统大约 2-5 秒，然后最终滚动到输入。这种情况发生一次后，在您刷新页面之前就不会再发生。我已经查看了所有地方，是的，iOS 7 Safari 有很多问题，但让我们尝试看看我们是否能解决这个问题。

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

我将列出我的 friend 和我迄今为止尝试过的所有内容:

删除了在 jQuery 中添加事件处理程序的能力。 (注意:我们所有的事件处理程序都是通过 jQuery 分配的，除了 unload 和 onpageshow)。

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

从输入中删除了所有 JavaScript。

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

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

切换回以前的 jQuery UI 版本。

将输入事件处理更改为委托(delegate)和实时处理，而不是 on('click')

删除了所有 CSS 类。

从页面中删除了所有 CSS。注意:操作系统的响应时间下降到 1-2 秒，但仍然发生。

有没有人有任何想法？

谢谢一堆!

Answer 1

(有一些比较有效的解决方案，请参阅列表末尾附近)

在我的公司，我们也深受其害。我们向 Apple 提出了问题，但听到了妈妈的声音。

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

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

摘要:

在带有标记为“display: none”的容器内包含命名输入元素的表单的页面上，第一次按下该表单中的输入在键盘出现和输入焦点之间有非常明显的延迟(20秒-2分钟) .这会阻止用户使用我们的网络应用程序，因为用户界面卡住等待键盘响应花费了大量时间。我们已经在各种场景中对其进行了调试，以尝试辨别发生了什么，这似乎是由于 iOS7 解析 DOM 的方式与在 iOS6 上的方式发生了变化，而没有这些问题。

从连接 iPad 的 Safari Inspector 中的调试来看，我们发现 iOS7 提供了更多有关(程序)事件的信息，以至于我们发现 _CollectFormMetaData 是问题的根源。搜索元数据会导致大量流失，随着包含输入的隐藏容器数量的增加，这种流失会超过线性增长。我们发现 _isVisible 和 _isRenderedFormElement 被调用的次数远远超出了它们的合理性。此外，如果有帮助，我们发现一些与信用卡和地址簿相关的检测功能是大量时间消费者。

这里有一些 jsFiddles 用于说明。请在运行 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 个隐藏输入，一个可见，一个单独可见

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

http://jsfiddle.net/gUDvL/41/ - 99 个隐藏输入，一个可见，一个单独可见，全部
使用 autocomplete="off"属性

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

http://jsfiddle.net/gUDvL/63/ - 与 gUDvL/43/相同，但具有自动完成、自动更正、自动大写和拼写检查功能

http://jsfiddle.net/gUDvL/65/ - 与 gUDvL/63/相同，但带有清理的缩进(在 iPad 上看起来更慢)

http://jsfiddle.net/gUDvL/66/ - 与 gUDvL/65/相同，但再次通过 css 显示 none 而不是 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 在每个输入之前添加了一个图例标签。 (显着改进 - 初始焦点减少到 2-3 秒)

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

(我们应该注意到，将 iPad 连接到 Mac 并使用 Safari 的调试器极大地强调了延迟。)

重现步骤:

在 iPad 上加载上述任何 jsfiddles

按输入获得焦点

观看屏幕直到您可以输入

预期结果:

期望能够在键盘弹出后立即输入

实际结果:

看着键盘弹出和屏幕卡住，在一段时间内无法滚动或与 Safari 交互。在持续时间之后，焦点按预期给出。从那时起，在专注于输入时不再经历进一步的卡住。

tl;dr 技术总结

所以总的来说，有几个来自各种答案的建议修复:

不要用 display: none 隐藏 div - 使用类似 text-indent

的东西

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

自动对焦/模糊 - 对我不起作用，但有两个人报告它起作用

Apple 的相关主题:

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