Search code examples
ioscsshoverclickmobile-safari

iOS 7 hover/click issue - no click triggered in some cases

I have a kind of "widget" - a data table with some rich functionality like sorting, row selection and else.

In some cases (widget placement/nesting in DOM) clicks on it's rows are not triggered in iOS 7 Safari.

Widget is using jQuery 1.6.4

I can't publish a whole widget code (and you really wan't this to happen ;)), but I can narrow down a reproduction scenario to the following case:

  1. Simple html table with some rows, two cols in each
  2. First column contains a "checkbox" - simple div which is normally hidden and becomes visible, then parent row getting hovered. Visibility is triggered with CSS only
  3. Every row has a click event handler. No mater what it does. In my example it will trigger an alert()
  4. Table's parent is a block element with a fixed height and overflow-y set to auto
  5. Table is bigger than it's parent, so, some table content is hidden and can be seen with scrolling

Here is a jsFiddle: http://jsfiddle.net/822eG/4/

On any desktop browser items are successfully hovered, click is triggered. On iOS7 hover is working but click is NOT triggered.

NOTE: On iOS you must tap twice to trigger click. First click will trigger hover and you'll see a "checkbox", then second tap must trigger a click, but it doesn't...

Any of those conditions is REQUIRED to reproduce an issue. Remove a single one and it starts working...

If you remove a "checkbox" appearance - click will work (http://jsfiddle.net/822eG/5/).

If you remove a height fix - it will work (http://jsfiddle.net/822eG/6/).

If you remove a overflow scrolling - it will work (http://jsfiddle.net/822eG/8/).

Any workaround is needed but functionality should be kept untouched. So, I can't remove "checkbox", size fix, hovering, clicking or overflow scrolling. Also, changing HTML markup is hardly to happen.

NOTE I've got a solution - see my answer below. But I still need a better workaround to keep using CSS as mush as possible.

ADD: Filed a bug to Apple #16072132

Solution

  • Try this:

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