probleme curieux sur ios

rif152
Javascript

Bonsoir,
Je viens vers vous car je suis confronter a un probléme curieux sur ios (tester sur iphone 4).
Pour activer le menu sur mobile on click sur un bouton, le menu s'ouvre et un overlay apparait au dessus de la page, jusque la tout fonctionne parfaitement,pour refermer le menu on click sur cette overlay, et la sa fonctionne partout (desktop, android) mais pas sur ios et je n'est aucune idée de pourquoi, j'espere que vous pourrez m'aider a y voir plus clair, car la je ne comprend vraiment pas...

html:

<body>
   <div class="menu-ctn" id="menu-ctn">
       <nav class="menu">
           <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
           </ul>           
       </nav>
   </div>
   <div class="overlay" id="overlay">
   </div>
</body>

css:

.menu-ctn {
    position: fixed;
    top: 0;
    left: -255px;
    z-index: 1000;
    width: 255px;
    height: 100%;
}

.menu-ctn.active {
    left:0;
}

.overlay {
position: fixed;
        top:0;
        left:0;
        width:100%;
            height:100%;
    background-color:    rgba(0,0,0,0.8);
}

le css du menu n'est que de la "déco"
js (une fois jquery ready):

$("#menu-ctn").click(function () {

        $("#menu-ctn").toggleClass("active");  //ajout de la classe active au menu
        $("#overlay").toggleClass("over-menu");  // ajout de la classe menu a overlay

    });

$("body").on("click", "#overlay.over-menu", function(e) {
        $("#menu-ctn").toggleClass("active");
        $("#overlay").toggleClass("over-menu");
        });

A savoir que j'ajoute la classe menu a overlay car j'utilise overlay pour différente chose, et du coup cette classe me permet de reperer que ces le menu qui est activer.
Voila, donc sa marche correctement partout sauf sur ios... sur ce dernier le menu s'ouvre sans probleme mais on ne peut pas le fermer [decu]

J'espere que quelqu'un aura une piste, car la je cherche ais je ne trouve pas du tout [decu], merci d'avance pour votre aide [smile]

6 réponses

rif152
Auteur

arf persnne n'a d'idée? :(

betaWeb

Essayes de jouer avec le z-index de ton overlay.

rif152
Auteur

Merci pour ta réponse ;)
Bon j'ai essayer, mais sa ne fonctionne pas mieux :(
Du coup aprés différents essai le probléme semble venir de l'evenement "click" en utilisant le gestionnaire d'evenement .on().

Effectivement en utilsant :

$("#overlay").click(function() {
    $("#menu-ctn").toggleClass("active");
    });

la sa fonctionne, mais sa ne me permet pas de cibler l'overlay avec la classe .menu rajouter dynamiquement...

Autre chose, qui montre que c'est le "click" qui pose probléme, si dans mon premier code, je remplace click par touchstart, sa fonctionne correctement, mais j'aimerais savoir pourquoi avec click sa fonctionne partout sauf sur ios...

Si quelqu'un a une piste du coup avec ces info complémentaire...
Merci a vous Smiley smile

Lartak

Bonjour.
Tu nous montre du code HTML et CSS, mais il y a des problèmes concernant les id dans les deux.

rif152
Auteur

Effectivement petit probléme en recopiant le code, c'est corriger ;)
Du coup si tu a une idées ;)

betaWeb

C'est normal puisque tu fais un toggleClass(). Utilise plutôt la fonction removeClass() lors de ton event click sur ton overlay.