Attention ! Cet article a plus de 1 an (2546 jours), ce qui signifie qu'il n'est pas forcément à jour !
Il m’arrive souvent en production que dû à un hover en css sur un bouton ou un lien, que sur un appareil IOS, l’utilisateur doit faire un double click pour finalement accéder au lien. Voici comment le contourner.
Effectivement, sur les appareils IOS, selon le CSS ajouté, le premier click (ou plutôt "touch") va faire un trigger du hover, tandis que le second, va pour sa part faire un trigger sur le click. En soi, je ne trouve pas cela si mal, cependant l’appareil Android pour sa part ne fera pas cela. Il va directement effectuer le click et non le hover. Ce qui nous donne donc une inconsistance dans le comportement. Ce qui n’est pas très intéressant.
Vous pouvez contourner le problème en enlevant l’effet d’hover en CSS avec un "media query" pour ne viser que les mobiles. Par contre, pour un écran large comme le iPad la problématique reste là.
Voici une petite fonction javascript pour vous aider.
function forTouchstart(evt) {
var target = $(evt.currentTarget);
target.trigger("click");
}
$('body').on('touchstart', '.monbouton', forTouchstart);
Avec ce code, on associe un événement "touchstart" sur un bouton. Dès que cet événement intervient, nous forçons un click. Tous simple et bien pratique.