Salut,

Je me suis aperçu que sur IOS (nous avons testé sur un iphone 5c et sur l’ipad 4), certains effets :hover sur les boutons provoquaient un problème de comportement lorsque le :hover déclenchait par exemple l’apparition d’un bloc au-dessus de l’ancien ou l’apparition/disparition d’un élément.

L’action est telle quelle :
Premier clic on aperçoit bien le style :hover mais le clic n’est pas exécuté
Second clic on reste avec le style :hover et le clic est exécuté.

A quoi est-ce dû ?

 

Un article datant de 2012 ( http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/ ) présente le problème uniquement sur les effets :hover mettant en jeu des comportements faisant apparaître des éléments lors du hover par exemple un :hover qui fait apparaître un block en position absolute au-dessus de l’actuel, ce qui est le cas des effets sur certains boutons que nous utilisons.

Quelles solutions ?

 

Nous avons deux alternatives, une en Javascript/CSS et une plus « brutale » en Javascript.

D’après l’article le problème n’existe que sur IOS, je vous propose plutôt que d’utiliser modernizr comme proposé dans l’article qui va cibler tous les mobiles/tablettes, d’utiliser device.js de Matthew Hudson qui est capable de cibler IOS en particulier (ipad, ipod, iphone, itrucbidule). Il place une classe .ios dans la balise html pour cibler les périphériques IOS.

https://github.com/matthewhudson/device.js

Dès lors dans la CSS il faudra prévoir une alternative avec une cible du type :

avant :

.maclasse:hover{ /*styles posant problème*/ }

après :

.maclasse:hover{ /*styles posant problème*/}

html.ios .maclasse:hover{
/*surcharge afin de retirer les styles posant problème*/
}

et modifier donc la façon dont les effets sont produits en les simplifiant sans apparition d’éléments au dessus de la zone parcourue.

La solution Javascript

Code un peu bourrin mais qui a l’avantage d’être très rapide à mettre en place en attendant d’appliquer la méthode CSS :

https://gist.github.com/rcmachado/7303143

Et voilà un problème réglé, entre nous prenez le temps de mettre la solution CSS plus propre et pouvant offrir une bonne alternative à l’utilisateur.

A bientôt pour de nouvelles bonnes pratiques ;)

Filtres

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec un *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>