Bonjour,

Je développe actuellement un site web www.combimadagascar.fr

Il se trouve que le bouton sur mobile pour afficher le menu marche partout sauf sur les navigateurs apple (iOS Safari, iOS Chrome...)

En temps normal on devrait voir le menu s'afficher comme ceci:

Le navigateur reconnaît bien l'action car l'animation CSS marche bien quand on touche le bouton mais c'est l'action Javascript qui marche pas.

Voici le code Javascript qui devrait gérer l'affichage du menu:

var trg=$("nav .button_menu");
trg.click(function () {
	love.app.nav.menu.toggle();
});

love.app.nav.menu.toggle() est une fonction simple qui s'occupe d'afficher/fermer le menu en modifiant son CSS (opacité/height) et ainsi cacher ou afficher le menu. Sur ordinateur il n'y a aucun erreur console pour Firefox et Chrome en tout cas, les Androids aussi marchent bien.

Je suis un peu perdu car il n'y a aucun problème avec les autres navigateurs. Merci d'avance pour vos réponses.

-
Edité par Malice13 18 septembre 2019 à 16:21:58

Essaye de voir si le probleme vient de la fonction toggle ou de l’eventlistener click en mettant un alert() dans ton eventlistener click.

si le message apparait, le probleme vient de la fonction toggle dans sa cas précise nous le 👍

Yoooooo

Sinon, remplace le <a href="#0"> par un <button onClick="taFonctionJavascriptPourAfficherLeMenu()"><img src="/monIcone.png" /></button>

Bonjour,

Merci beaucoup de vos réponses, j'ai passé la journée à googler mon problème. En fait le problème c'est que le conteneur parent (ici nav) avait la propriété:

overflow: hidden;

Il suffit de passer le nav à:

overflow: visible

Et voilà!

Ici le lien pour le problème en anglais si quelqu'un rencontre le même dilème que moi:

https://stackoverflow.com/questions/51013096/ios-safari-z-index-not-working/55528538

-
Edité par Malice13 19 septembre 2019 à 15:13:22