Sur le dernier site que j’ai mis en ligne, j’ai eu un petit souci sous les iPad et autres iPhone à cause d’un comportement tout bête : quand on survole un des liens de la navigation principale du site Arcora, un petit élément apparait pour signaler le lien.
Rien de bien méchant, cet élément .navigation-redhover
est caché par défaut et je le fais apparaitre au :hover
. Sauf que sur iPad et autres iBidules, ce genre de comportement va s’effectuer ainsi si on fait un « tap » sur le lien :
- on fait un « tap » sur le lien ;
- cela affiche le lien en état
hover
; - et il faut faire un second « tap » sur le lien pour l’activer !
Ce qui est particulièrement casse-pied dans ce cas-là : devoir faire deux « tap » à la suite pour activer un lien d’une navigation principale, c’est pénible et contre-intuitif au possible pour un utilisateur lambda.
Sans trop le savoir, même si j’avais déjà constaté ce comportement à l’époque, c’est ce que je déclenchais sur le site de CSM avec l’effet de survol sur les portfolios. Sauf que dans ce cas, ce comportement ne me dérangeait pas, bien au contraire ! Dans ce cas, comme il y avait pas mal d’informations à afficher, je trouvais le comportement plutôt adapté.
C’est plus ou moins expliqué dans la doc Apple sur les événements.
En clair, si nous sommes sur un lien, et qu’il y a un changement de contenu sur un « tap » (un contenu qui apparait dans mon cas), il n’y a pas d’événement propagé (il ne se passe rien en somme), même sur un lien tout ce qu’il y a de plus standard. Cela peut se comprendre, cela évite de faire perdre une information potentielle aux utilisateurs. Ceci dit, dans mon cas, c’est plutôt fâcheux.
Côté solution, il n’y en a pas des milliers :
- Ne pas avoir de contenu caché qui apparait au survol ;
- Ou alors utiliser une bibliothèque comme Modernizr qui détecte les touch events.
La seconde solution ajoutera une classe touch
ou no-touch
sur l’élément html
. Et du coup, l’effet de hover
sera à activer seulement si on a la classe no-touch
(autrement dit, à rendre visible que dans ce cas), via :
.no-touch .navigation-link:hover .navigation-redhover {
display: block;
}
Ce n’est pas parfait, mais cela évitera quelques tracas sur des tablettes et autres smartphones.