Mozilla CSS Transform 属性不起作用

Question

我正在构建一个具有简单转换模拟幻灯片效果的覆盖层。我在Chrome和Safari中运行良好，但在Firefox中不起作用，我不知道为什么。

这是我的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;
}

和html:

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

我正在添加带有javascript:的开放类

toggleMenu: function ( ) {
          var overlay = this.$('.overlay');
          if( overlay && overlay.hasClass('open') ) {
            overlay.removeClass('open')
          }
          else if(overlay){
            overlay.addClass('open')
          }
        },

Answer 1

尝试将其添加到.overlay

transform-style: preserve-3d;

当FF变换不正确时，通常会在适当的元素中丢失这一点。Webkit构建似乎不需要这样来建立所需的堆叠上下文，但在这种情况下，Chrome/Safari在相邻的兄弟元素上使用z索引会产生有趣的效果。