CSS-3转换bug,菜单出现卡住

Question

我使用这个名为transit.js的插件来创建一个简单的菜单动画,基本上我有以下菜单,见下图:

打开和关闭菜单的代码如下:

$('.main-header .nav-toggle-button').on('click' , function() {

    // $('.main-header .navigation').toggleClass('show');

    if ($('.main-header .navigation').hasClass('show'))  {
        $('.main-header .navigation').stop().removeClass('show');
        return false;
    }

    $('.main-header .navigation').stop().transition({
          perspective: '1000px',
          rotateY: '180deg',
          duration : 0
        }, function() {
          $(this).addClass('show').stop().transition({ rotateY: '0' });
        });

    return false;

}); 

DEMO HERE,(对不起,小提琴只是没有重现这个问题.)

BUG:正如你所看到的那样,没有动画,菜单消失,现在当页面滚动超过200px+和低于992px宽度时会出现这个错误 ,所以基本上当你点击汉堡包时,菜单会打开一个旋转动画但是当你再次点击汉堡包时,即使从菜单中删除了'show'类,菜单有时也不会关闭.

这是我之外的其中一个错误,在控制台中检查并通过JS代码实际上并没有真正帮助.

我真的很感激,如果有人能指出我在这里做错了什么,因为JS和CSS看起来确实很完美但是使用传输的css转换只是没有按预期工作.

Answer 1

正如已经提到的似乎是一个Chrome错误,我尝试在你的演示中编辑CSS,这个解决方案似乎有效...尝试在这里添加一个"z-index"-1:

@media (max-width: 992px)
.navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    background: rgba(255,255,255,.95);
    z-index: -1; // ADD THIS
}