Try this:
.wrapper {
-webkit-overflow-scrolling: touch;
}
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:
div
which is normally hidden and becomes visible, then parent row getting hovered. Visibility is triggered with CSS onlyclick
event handler. No mater what it does. In my example it will trigger an alert()
overflow-y
set to auto
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;
}
OTHER TIPS
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.
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.
My current working solution requires no any changes in a whole code base and works fine in our conditions
MutationObserver
, monitor node insertion into head
link
, check document.styleSheets
document.styleSheets[n].rules[i].selectorText
) contains :hover
check styles for this selectordisplay
different from none
or visibility
different from visible
- this is a "show by hover" style:hover
by .hover
and declare a body
delegate for mouseenter
and mouseleave
events which will toggle .hover
class on triggered elementFull source code here: https://gist.github.com/Olegas/9143277
..try using this:
$('.row').on('touchstart click', function(){
alert('clicked');
});