Menu hover sur iPad

Bonjour,

J'ai du réaliser un site avec CMSMS incluant un menu qui s'ouvre (css :hover).

Un fois le site terminé (Testé sur Windows avec ie8, ie9, firefox, safari, chrome, opera puis sur Android avec Chrome, DolphinHD), il a l'air d'être fonctionnel partout.

Le client essaie et me dit qu'il ne marche pas sur iPad et iPhone (D'après ce que j'ai lu le :hover est ignoré sur iPhone et iPad. Je fais plusieurs modifications et intégré ce code js -> http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/.

Je me rend chez le client et a première vue ça fonctionne sur iPad et iPhone ! Mais en fait non, car sur iPad uniquement, lorsqu'on effectue un zoom ou un dezoom, le menu ne fonctionne plus ensuite ! Quand on clique dessus il s'ouvre et se referme instantanément !

J'ai essayé plusieurs solutions mais toujours sans résultat. N'ayant pas d'iPad, je n'ai aucun moyen de vraiment tester et je me trouve maintenant dans une impasse.

Avez-vous déjà été confronté a ce problème ? Pourriez-vous m'aider à me débarrasser de ce problème ?

Merci d'avance pour toutes vos réponses !

Voici un exemple de la page qui pose problème : http://jsfiddle.net/P8Y4j/
et un rar avec les fichier : http://www.mediafire.com/?auk97ryh992al8h

Normalement, un menu ça ne se fait pas 100% en css mais avec du javascript, il existe un plugin jquery qui facilite la chose : Superfish.

Je viens de tester un des exemples du site sur l'iPhone, ça fonctionne parfaitement.

Merci, ça confirme que sur iPhone ça fonctionne maintenant

Maintenant reste le cas iPad uniquement après zoom sur la page...
J'ai eu l'occasion de rapidement tester avec le menu par défaut de cmsms (sans pseudoclasse hover javascript) et ça fonctionnait nickel sur iPad. Je suis repartit de cette base et modifié le css pour arriver a nouveau au design voulu. Mais après cela le client m'a indiqué que ça ne fonctionnait toujours pas.

Je ne vois vraiment pas où est le problème: ça fonctionne très bien sur mon iPad, je viens de tester, avec ou sans zoom.


Erreur de manipulation du client?
Modifié par Patidou (14 Mar 2012 - 21:15)

wow, sérieux ?

Très intéressant cela, j'ai testé moi même chez le client sur ses deux iPads, et ça buggait :S (Peut-être qu'il ne fait aucune mise à jour)

En tout cas un grand merci pour l'info.

iOS 5.1 iPad première génération

Salut Nintendoman, Patidou et les autres

J'ai le même problème que toi Nintendoman (moi aussi avec CMSMS, mais ça n'a pas de rapport).
J'ai peut-être trouvé la solution : a priori les iPad gèrent mal les événements hover (ce qui peut ce comprendre puisque tu ne peux pas vraiment survoler un élément avec un système tactile).
De ce que j'ai lu en ajoutant un événement JavaScript ça remet les choses en places.

Voilà quelques sources :
-http://niteodesign.com/web-design/iphone-ipad-ios-and-the-css-hover-event/
-http://justtwonerds.com/2010/02/24/free-css-dropdown-menu-with-iphone-quick-tip/^
-http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/

Je teste ça sur mon site de suite.

Bredt
Modifié par Laurie-Anne (24 Apr 2012 - 10:40)