mozilla css transform property dosn't work

Question

I am building an overlay with simple transform mocking slide-down effect. I works fine in Chrome and Safari, but it doesn't work in Firefox and i don't know why.

Here is my css:

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba($off-canvas-bg, 0.95);
  z-index: 99;
    overflow: auto;
}

.overlay-slidedown {
visibility: hidden;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
-moz-transition: -moz-transform 0.4s ease-in-out, visibility 0s 0.4s;
transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}

.overlay-slidedown.open {
visibility: visible;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
-moz-transition: -moz-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}

and html:

  <div class="overlay overlay-slidedown">
  </div>

I am adding open class with javascript:

toggleMenu: function ( ) {
          var overlay = this.$('.overlay');

          if( overlay && overlay.hasClass('open') ) {
            overlay.removeClass('open')
          }
          else if(overlay){
            overlay.addClass('open')
          }

        },

Answer 1

Try adding this to .overlay

transform-style: preserve-3d;

Quite often when FF transforms are not right, this is missing from the appropriate element. Webkit builds seem not to require this to establish the required stacking contexts, but Chrome/Safari suffer funny effects with the z-index on adjacent sibling elements in such cases.