iOS Hover Fix / Double-Tap Problem

iPad und iPhone haben manchmal das s.g. “Double-Tap”-Problem. Das Problem tritt zusammen mit dem CSS Selektor “:hover” auf. Das iOS interpretiert hier den Mouseover-Effekt, den es auf mobilen Endgeräten eigentlich nicht gibt. Es gibt eine einfache Lösung: Der folgende Code muss einfach nur in den HEAD-Bereich der Seite kopiert werden. Alternativ können die beiden Snippets auch in separate Dateien ausgelagert werden.

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

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