Question

I am using jQuery’s on() function on iOS’ Safari Mobile Browser like this:

$("#content").on(".element", click(function(){ do stuff});

When clicking on .element Safari highlights the whole #content area instead of just the area .element takes.

When using

$(".element").click(function(){do stuff});

instead the right area is highlighted. I guess this is the expected behavior but it’s not intuitive for the user at all, so I’m looking for a workaround.

I know I can get rid of the highlighting completely by using -webkit-tap-highlight-color: rgba(0,0,0,0); but I think the highlight is actually pretty useful generally since CSS’ hover isn’t useful on mobile devices already.

Is there a way with jQuery’s on function and Safari Mobile to get the tap highlight of the .element?

Answer 1

I solved it the following way:

1. Put document.addEventListener("touchstart", function(){}, true); in document ready function enabling the css :active pseude class
2. Disabling the tap highlight completely: -webkit-tap-highlight-color: rgba(0,0,0,0);
3. Adding .element:active{background: #cccccc;}

This way the clicked (active) element gets a nice gray background when touched.