iPad and iPhone sometimes have the so-called “Double tap” problem. The problem occurs together with the CSS selector “: hover”. The iOS interprets the mouseover effect, which actually does not exist on mobile devices. There is a simple solution: just copy the following code into the <head> area of the page. Alternatively, the two snippets can also be stored in separate files.

<script type="text/javascript">
    document.addEventListener('touchstart', function() {}, true);

    *:active {
        -webkit-user-select: none;
        -webkit-touch-callout: none;

Leave a Reply