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添加open class：

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-index产生有趣的影响。

mozilla css转换属性不起作用

1 个答案: