CSS/JQuery menu not functioning properily in Firefox

Question

So, i created toggleable overlay menu, tested it in all major browsers (even in Internet Explorer), and its working fine everywhere except in Firefox(tested in version 46)!

The problem is, when you toggle overlay by pressing "MENU" button, the "CLOSE" button in overlay is not appearing and user is stuck with open menu.
This how it should look: This how it looks like So i am asking you for help, since i allready ran out of ideas.

https://jsfiddle.net/fpgkzd2x/5/ - Fiddle with working code.

HTML Code

<header class="main-nav flex-vhcenter-parent">
    <div class="button ">
        <p>MENU</p>
    </div>
</header>
<nav class="overlay">
<header class="main-nav flex-vhcenter-parent">
    <div class="button ">
        <p>CLOSE</p>
    </div>
</header>

</nav>

SASS Code

$menu-color: #3c948b;   


.flex-vhcenter-parent{
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* Main Nav menu styles */


.button{
  transform: scale(1.3);
  transition: all 500ms;
}


.main-nav{
    display: flex;
    width: 100%;
    transition: all 500ms;
    z-index: 20;
    background-color: $menu-color;
    position: fixed;
    &.fixed{
      .button{
        transition: all 500ms;
        transform: scale(1);
      }
    }

}

header > div{
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-nav p{
    margin: 0;
  font-size: 1.5em;
}

/* Toggleable Overlay */
.overlay{
  z-index: 30;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.90;
  top: -100%;
  transition: top 100ms ease-out;
  .button{
    margin: 0;
    color: #fff;
  }
}

.opened{
  top: 0%;
  transition: top 100ms ease-out;
}

JQuery code for toggling

overlay = $(".overlay");
$(".button").click(function(event){
    overlay.toggleClass("opened");
});

@S.Greczyn Yep, tottaly fine, klooks like it was all about flexboxes. And by the way, where have you got info about buggy flexboxes in FF? I cant wind it on MDN nor in Caniuse. — IdeaMan
– IdeaMan, Commented May 23, 2016 at 16:22
@IdeaMan Every browser has some glitches with flexbox. (Sadly because it's a very nice layout technique). IE has the most. Info on Flexbugs. — michaPau
– michaPau, Commented May 23, 2016 at 16:27
Try to change .overlay{ z-index: 30;} to .overlay{ z-index: 19;} — Javier Gonzalez
– Javier Gonzalez, Commented May 23, 2016 at 16:43

S.Greczyn · Accepted Answer · 2016-05-23 16:37:28Z

Display flex its not fully supported by Firefox Does it looks like You expect?

    $menu-color: #3c948b;   



    .flex-vhcenter-parent{
      display: block;
      justify-content: center;
      align-items: center;
    }



    /* Main Nav menu styles */


    .button{
      transform: scale(1.3);
      transition: all 500ms;
      margin: 0 auto;
    }


    .main-nav{
        display: inline-block;
        width: 100%;
        transition: all 500ms;
        z-index: 20;
        background-color: $menu-color;
        position: absolute;
        text-align: center;
        &.fixed{
          .button{
            margin: 0 auto;
            transition: all 500ms;
            transform: scale(1);
          }
        }

    }

    header > div{
      width: 20%;
      display: block;
      align-items: center;
        justify-content: center;
    }
    .main-nav p{
      margin: 0 auto;
      font-size: 1.5em;
    }

    /* Toggleable Overlay */
    .overlay{
      z-index: 30;
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: #000;
      opacity: 0.90;
      top: -100%;
      transition: top 100ms ease-out;
      .button{
        margin: 0 auto;
        color: #fff;
      }
    }

    .opened{
      top: 0%;
      transition: top 100ms ease-out;
    }

http://jsfiddle.net/fpgkzd2x/8/

Collectives™ on Stack Overflow

CSS/JQuery menu not functioning properily in Firefox

HTML Code

SASS Code

JQuery code for toggling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML Code

SASS Code

JQuery code for toggling

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related