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>