javascript - CSS-3 转换错误，菜单出现卡住

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 ，(很抱歉， fiddle 并没有重现这个问题。)

BUG: As you can see on close there is no animation, the menu goes away, now this bug occurs when the page is scrolled more than 200px+ and below 992px width, so basically when you click on the hamburger, the menu opens with a rotate animation but when you click the hamburger again the menu sometimes doesn't close even though the 'show' class has been removed form the menu.

这是我无法理解的错误之一，在控制台中检查并检查 JS 代码并没有真正帮助。

如果有人能指出我在这里做错了什么，我将不胜感激，因为 JS 和 CSS 似乎真的很完美，但使用 transit 的 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
}