CSS hover puede crear problemas en ipad

En el iPad y en el iPhone (en dispositivos táctiles iOS en general) nos encontramos a veces un comportamiento extraño: tocamos un link pero no nos lleva a la URL correspondiente, tocamos una segunda vez y entonces funciona.

En el primer toque se comporta como si fuera un hover, en el segundo como un click. El mapeo automático de click a touch parece no funcionar correctamente ¿de que depende? ¿porqué algunos links funcionan y otros no?

:hover en dispositivos táctiles

En un dispositivo táctil el concepto de hover no tiene sentido. No podemos colocar el cursor sobre un link, simplemento lo tocamos o no.

Parece lógico suponer que los dispositivos táctiles ignorarán el hover, pero no siempre es así. Los desarrolladores de Apple consideran que si se ha definido un comportamiento mediante CSS :hover puede haber información importante asociada y debe mostrarse. El primer toque funcionará como un hover y el segundo como un click.

En realidad iOS sólamente considera el comportamiento asociado a hover cuando modifica la visibilidad de un elemento de la página (visibility o display). Cualquier otra propiedad que cambiemos no tiene este efecto, los links responderán con un solo toque.

Este comportamiento realmente tiene sentido porque hay menús desplegables que se muestran al pasar el ratón por encima. iOS permite de esta manera que el primer touch muestre el submenú desplegable (hover) para despues hacer click en lo opción del submenu.

Si se muestran elementos nuevos en el hover, el primer click se considera una activación del nuevo contenido.

Este comportamiento está documentado en la iOS developer library:

"Si el usuario toca un elemento clickable, los eventos llegarán en este orden: mouseover, mousemove, mousedown, mouseup, and click. [...] Si el contenido de la página cambia en el evento mousemove, no se envía ninguno de los eventos posteriores. Este comportamiento permite al usuario pulsar en el contenido nuevo"

Se resume en la siguiente imagen:

El click funcionará con un sólo toque si no mostramos elementos nuevos. Por ejemplo, el siguiente CSS no supone ningún problema:

a:hover {
    color: blue;
}

Sin embargo es muy común mostrar un tooltip en el hover sobre un botón o un enlace. Cada vez que hagamos esto, ese botón necesitará dos toques en iOS para funcionar adecuadamente.

Solución para evitar el doble click

Lo primero que tenemos que considerar es que este comportamiento no es igual en todos los dispositivos táctiles, por eso debemos evitar mostrar elementos importantes en el hover.

Si utilizamos Modernizr podemos aprovechar la clase CSS 'no-touch' que crea para los dispositivos no táctiles:

    .no-touch p:hover span {
        display: block;
    }

De esta forma el span con nuestro tooltip se mostrará sólo en dispositivos no táctiles.

Otra solución es evitar el mapeo automático de touch a click y manejar explicitamente el evento touchstart junto con el click. Tendríamos el siguiente JS:

    ('#myElement').on( 'touchstart click', myClickCallback );

En vez de:

    ('#myElement').on( 'click', myClickCallback );

Fuentes:
jQuery click events on the iPad
stackOverflow: Javascript Events are not working in Tablet-pc
Fixing jQuery Click Events for the iPad
iOS has a :hover problem