mousemove animation with transition lags in firefox

Question

У меня есть куча мелких частиц, которые я бы немного двигал, когда мышь двигается. Их позиции относительно родителей. Движение такое же, как я хотел в хроме, очень гладкий и тонкий, но сильно задерживается в firefox.

This - упрощенная версия jsfiddle того, что я пытаюсь сделать. Откройте его как в хроме, так и в firefox и сравните движения.

Это Java-код, который использует JQuery MouseMove()

var centerX = window.innerWidth/2, 
    centerY = window.innerHeight/2; 

    $('body').mousemove(function(e){ 
    var clientX = e.clientX, 
     clientY = e.clientY, 
     amountMovedX = (centerX - clientX)/20, 
     amountMovedY = (centerY - clientY)/20; 
    if(clientX > centerX){ 
    amountMovedX *= -1; 
    } 

      $('#rect1').css('transform','translate3d('+amountMovedX*1.1+'px,'+amountMovedY+'px, 0) rotate(-15deg)'); 
        $('#rect2').css('transform','translate3d('+amountMovedX*1.8+'px,'+amountMovedY*1.4+'px, 0)'); 
        $('#rect3').css('transform','translate3d('+amountMovedX*0.8+'px,'+amountMovedY*1.9+'px, 0) rotate(30deg)'); 
        $('#rect4').css('transform','translate3d('+amountMovedX*1.6+'px,'+amountMovedY*0.7+'px, 0)'); 

        $('#rect5').css('transform','translate3d('+amountMovedX*-1.7+'px,'+amountMovedY*1.1+'px, 0) rotate(30deg'); 
        $('#rect6').css('transform','translate3d('+amountMovedX*-0.8+'px,'+amountMovedY*1.9+'px, 0)'); 
        $('#rect7').css('transform','translate3d('+amountMovedX*-1.3+'px,'+amountMovedY*0.9+'px, 0) rotate(-30deg'); 
        $('#rect8').css('transform','translate3d('+amountMovedX*-0.5+'px,'+amountMovedY*1.5+'px, 0) rotate(-15deg)'); 
     }); 

Я думаю, что это связано с переходом частиц, потому что если удалить свойства перехода, анимации одинаковы в обоих браузерах, но мне нужно это время перехода и ослабление из-за некоторого другого движения этих частиц. Итак, любые идеи, которые могут вызвать это?

А также, если в моем коде есть что-то странное или неправильное, не стесняйтесь его исправить. Я очень хочу узнать как можно быстрее.

Answer 1

Там волшебная функция, которая решает эти рода проблемы: http://underscorejs.org/#throttle

Или вы можете идти об использовании requestAnimationFrame, как здесь: How to use requestAnimationFrame in mousemove event?

Пример с дросселированием:

var th=_.throttle(function(opts){//opts={x:...,y:...} 
//do your stuff here 
},100); 

$(document).on('mousemove',function(e){ 
th({x:e.pageX,y:e.pageY}); 
});