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

Question

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 1

Try this:

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

Solution 2

To get iOS to ignore hover states, try this:

.wrapper 
{cursor: pointer;}

You can use this on any element to get it to function as expected.

Solution 3

Suddenly, I've got a solution... Using JavaScript I can remove :hover selector but still keep functionality.

If I will trigger checkbox visibility not by CSS :hover but by class and set it via javascript, it will work.

http://jsfiddle.net/822eG/10/

Solution 4

My current working solution requires no any changes in a whole code base and works fine in our conditions

1. With MutationObserver, monitor node insertion into head
2. If new node is inserted, and this is a link, check document.styleSheets
3. For each sheet check it's rules
4. If rule selector (access by document.styleSheets[n].rules[i].selectorText) contains :hover check styles for this selector
5. If styles contains display different from none or visibility different from visible - this is a "show by hover" style
6. For each such style change it's selector - replace :hover by .hover and declare a body delegate for mouseenter and mouseleave events which will toggle .hover class on triggered element

Full source code here: https://gist.github.com/Olegas/9143277

View more solutions