iOS Hover Fix / Double-Tap Problem

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);
</script>

<style>
    *:hover,
    *:active {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }
</style>

Leave a Reply