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

Question

我有一种"小部件" - 一个具有一些丰富功能的数据表,如排序,行选择等.

在某些情况下(在DOM中放置小部件/嵌套),在iOS 7 Safari中不会触发它的行.

Widget使用的是jQuery 1.6.4

我无法发布整个小部件代码(你真的不会发生这种情况;)),但我可以将复制方案缩小到以下情况:

1. 简单的html表,包含一些行,每行有两个cols
2. 第一列包含一个"复选框" - 简单div,通常隐藏并变得可见,然后父行悬停.仅使用CSS触发可见性
3. 每一行都有一个click事件处理程序.无论它做什么.在我的例子中,它将触发一个alert()
4. Table的父元素是一个具有固定高度并overflow-y设置为的块元素auto
5. 表大于它的父级,因此,某些表内容是隐藏的,可以通过滚动查看

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

在任何桌面浏览器上,项目成功悬停,将触发单击.在iOS7上,悬停正在运行,但未触发单击.

注意:在iOS上,您必须点击两次才能触发click.首先点击将触发hover,你会看到一个"复选框",然后第二次点击必须触发a click,但它不会......

任何这些条件都需要重现问题.删除一个,它开始工作......

如果删除"复选框"外观 - 单击将起作用(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;
}