Search code examples
jqueryhtmliosmobile-safariarea

iOS Safari Mobile image map - area displays box when clicked

So, this one seems to be a little tricky. There's an image map with some areas and the function is like:

  • click on an area, display a tooltip

Here's some code (just a snippet):

<img src="content/dummy/1_small.jpg" alt="" usemap="#img_1">
<map name="img_1">
    <area shape="rect" coords="150,50,250,150" href="" alt="" />
    <area shape="rect" coords="250,500,350,600" href="" alt="" />
</map>

And the according click handler:

this.areas.click( function (event) {
    var position    = that.areas.index(event.target);
    that.toggleTooltipTouch(position);
    event.preventDefault();
});

Which works fine. But: Whenever I click on an area, Safari displays a little, slightly transparent box for the time of the touch event. If you hit it very short, it looks like it's flickering.

So, the question is: How to prevent this behavior and don't show that box?

Solution

  • As mentioned in iOS dark gray box active style you have to hide the tap highlight box:

    img { -webkit-tap-highlight-color: rgba(0,0,0,0); }