iOS 7 悬停/点击问题 - 在某些情况下不会触发点击

Question

我有一种“小部件”- 具有一些丰富功能(如排序、行选择等)的数据表。

在某些情况下(小部件放置/嵌套在 DOM 中)在 iOS 7 Safari 中不会触发对其行的点击。

小部件正在使用 jQuery 1.6.4

我无法发布整个小部件代码(你真的不希望这种情况发生；))，但我可以将复制场景缩小为以下情况:

1. 简单的 html 表格，有几行，每行两列
2. 第一列包含一个“复选框”- 简单的 div，通常隐藏并变为可见，然后悬停在父行上。仅通过 CSS 触发可见性
3. 每一行都有一个click 事件处理程序。不管它做什么。在我的示例中，它将触发 alert()
4. Table 的父元素是一个固定高度的 block 元素，overflow-y 设置为 auto
5. 表格比它的父表格大，所以，一些表格内容被隐藏，可以通过滚动看到

这是一个 jsFiddle:http://jsfiddle.net/822eG/4/

在任何桌面浏览器元素上成功悬停时，都会触发点击。在 iOS7 上悬停有效，但未触发点击。

注意:在 iOS 上，您必须点击两次才能触发点击。第一次点击将触发悬停，你会看到一个“复选框”，然后第二次点击必须触发点击，但它不会......

任何这些条件都是重现问题所必需的。删除一个并开始工作...

如果您删除“复选框”外观 - 单击将起作用 (http://jsfiddle.net/822eG/5/)。

如果您删除高度修复 - 它会起作用(http://jsfiddle.net/822eG/6/)。

如果您删除溢出滚动 - 它会起作用(http://jsfiddle.net/822eG/8/)。

需要任何解决方法，但应保持功能不变。所以，我无法删除“复选框”、大小修复、悬停、单击或溢出滚动。此外，更改 HTML 标记几乎不会发生。

注意 我有一个解决方案 - 请参阅下面的答案。但我仍然需要一个更好的解决方法来尽可能多地使用 CSS。

ADD:向 Apple 提交错误 #16072132

Answer 1

试试这个:

.wrapper {
    -webkit-overflow-scrolling: touch;
}