Javascript Firefox-起伏的动画&；对固定位置背景图像的影响

我已经试了好几天来找出这里出了什么问题，但都没能解决。我有两个容器。第一个具有固定位置的背景图像，样式如下：

#first-window {
    background: url(http://www.noticeeverythingcreative.com/img/cinque.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
     -moz-background-size: cover;
      -o-background-size: cover;
       background-size: cover;
    height: 100vh;
    width: 100vw;
}

第二个是相同的，但没有背景：

#second-window {
    height: 100vh;
    width: 100vh;
}

然后我有一个汉堡包菜单，当点击它时，会显示一个不透明的包装，动画显示一个关闭按钮，并将导航窗格从屏幕上的位置拉出

以下是JS：

$(document).ready(function(){
/*========================================================================
                           Navigation
===========================================================================*/

    $('a.menu, #fade-wrapper').click(function() {
        var clicked = $(this);
        if (clicked.is(fadeWrapper) || clicked.hasClass('open')) {
            closeMenu();
        } else {
            openMenu();
    });


/*=========================================================================
                       Variables and Functions
===========================================================================*/

    var nav = $('nav'),
        barOne = $('.menu-bar-top'),
        barTwo = $('.menu-bar-bottom'),
        barThree = $('.menu-bar-mid'),
        menuTrigger = $('a.menu'),
        fadeWrapper = $('#fade-wrapper'),
        footerHidden = $('footer.hidden'),
        bar = $('.bar');

    function transformMenu(top, transform) {
        return {
            'top': top,
            'transform': transform,
            '-webkit-transform': transform,
            '-moz-transform': transform,
            '-ms-transform': transform,
            '-o-transform': transform
        };
    }

    function openMenu() {
        fadeWrapper.stop(true, true).fadeIn(500);
        menuTrigger.addClass('open');
        $('html, body').css('overflow', 'hidden');
        nav.stop(true, true).animate({'left': '+=145px'}, 200);
        footerHidden.stop(true, true).animate({'bottom': '+=80px'}, 200);
        barOne.css(transformMenu('18px', 'rotate(405deg)'));
        barTwo.css(transformMenu('18px', 'rotate(-405deg)'));
        barThree.fadeOut(1);
        bar.not(barThree).css('background', '#66e2e3');
        barThree.css('background', '#303030');
    }

    function closeMenu() {
        menuTrigger.removeClass('open');
        $('html, body').css('overflow', '');
        nav.stop(true, true).animate({'left': '-=145px'}, 200);
        footerHidden.stop(true, true).animate({'bottom': '-=80px'}, 200);
        bar.css('background', '');
        barOne.css(transformMenu('13px' , 'rotate(360deg)'));
        barTwo.css(transformMenu('23px', 'rotate(-360deg)'));
        barThree.fadeTo(200, 1);
        fadeWrapper.stop(true, true).fadeOut(500);
    }
});

信不信由你，我已经为此大幅削减了开支。当您在第一个窗口上启动

openMenu（）

或

closeMenu（）

时，Firefox就会出现问题。动画只是断断续续的，当

#fade wrapper

淡入淡出时，屏幕会间歇性地闪烁白色。同样的动画在

#第二个窗口

上看起来很好，很平滑，唯一的区别是它没有背景图像

这是一把小提琴：

我想，这个问题更微妙，因为除了最基本的动画外，我遗漏了所有的动画。您可能更容易在实时站点上看到问题：

---

想法？

我在Chrome和Firefox（我的系统是带有Intel i5处理器的Ubuntu 13.10）上测试了fiddle和live站点，两者的性能完全相同，运行平稳。我知道在Windows上，Firefox比Chrome差得多。还可以尝试在安全模式（禁用扩展）下启动Firefox。我在安全模式下进行了尝试，在我自己的系统（Mavericks OSX，core i5）或功能明显较弱的Windows机器上都没有发现任何区别。第一个窗口非常起伏，第二个窗口非常平滑。您是否多次尝试触发菜单触发器？好的，在反复快速单击菜单按钮的同时重试。在第一个窗口或第二个窗口上，动画从来都不是起伏的，但是在第一个窗口中，我确实体验到了“白色闪光”，但只有在菜单已经打开时，然后快速关闭并打开它（我的意思是双击非常快）。对不起，我帮不上忙了。总体上看起来不错谢谢你的检查。