Mousemove Chrome Vs Firefox

Question

我已将以下代码放在一起，但在Safari / Chrome和Firefox中进行测试时发现性能略有差异。

var box = $('#menu');

var windowHeight = $(window).height();
var boxHeight = box.height();
var diff = windowHeight - boxHeight;

var startY = 0;
var dist = 0;
var boxtop = box.position().top;

var boxoffset = box.offset().top;


function movehandler(event){
    box.css('background-color' , '#ffff00');
    dist = (event.pageY - startY);
    var val = boxtop + dist

    box.css('-moz-transform' , 'translate(0px, '+ val +'px)');
    box.css('WebkitTransform' , 'translate(0px, '+ val +'px)');

    if (val < 0) {
        box.css('WebkitTransform' , 'translate(0px, 0px)');
        box.css('-moz-transform' , 'translate(0px, 0px)');

    } else if (val > diff) {
        box.css('WebkitTransform' , 'translate(0px, '+ diff +'px)');
        box.css('-moz-transform' , 'translate(0px, '+ diff +'px)');
    } else {
        box.css('WebkitTransform' , 'translate(0px, '+ val +'px)');
        box.css('-moz-transform' , 'translate(0px, '+ val +'px)');
    };          
}

box.bind('mousedown' , function(event){
    box.css('background-color' , '#ff00ff');
    box.bind('mousemove' , movehandler);
    startY = event.pageY;    
    boxtop = box.position().top;
});

box.bind('mouseup' , function(event){
    box.css('background-color' , '#333');
    boxtop = box.position().top;
    box.unbind('mousemove' , movehandler);
});

我注意到，在Chrome / Safari中，#menu div可以使用鼠标平滑地滚动第一次和随后的点击/移动。但是在Firefox中它首次点击是有效的，但要让#menu div在第二次点击/移动时移动，则需要在框移动之前mousedown然后mouseup。如果您尝试单击并移动div而不释放鼠标，则div似乎浮出框。

我的代码中是否有任何可能导致性能差异的内容，或者两个浏览器是否都在解释鼠标事件？

这是一个demo所以你可以看到我在做什么。

此外，对我的代码的任何一般性想法或评论都会被贬低，因为我一直在寻求改进。