jquery - Mousemove Chrome 対 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 では、#menudiv がマウスを使用して最初とその後のクリック/移動をスムーズにスクロールすることです。しかし、Firefoxでは最初のクリックで機能しますが、2回目のクリック/移動でdivを移動するには、ボックスが移動する前に移動#menuする必要があります。マウスを離さずに div をクリックして移動しようとすると、div がボックスから浮き上がっているように見えます。mousedownmouseup

私のコードにこのパフォーマンスの違いを引き起こすものはありますか、それとも両方のブラウザがマウスイベントを適切に解釈していますか?

ここにデモがあるので、私が何をしているのかを見ることができます。

また、私は常に改善を目指しているため、私のコードに関する一般的な考えやコメントをいただければ幸いです。