How to prevent cursor from getting stuck in css transform:rotate in firefox?

Question

In this code I'm trying to allow the user to grab the black square and rotate it around the inner circle.

http://jsfiddle.net/4CL9H/1/

If you try to do this, you'll notice that the cursor gets stuck about 50% of the time in firefox, preventing the $(document).off('mousemove'); from executing unless you click again to call the mouseup event hanlder.

This seems to work fine in IE, chrome and safari (crashes if you rapidly click the black square) however it's giving me problems in firefox.

Is there anyway I can improve this code so that the cursor doesn't get stuck in firefox?

NOTE If you're having trouble getting the cursor to get stuck, try clicking and holding (without moving) a bottom corner of the black box and then quickly moving the cursor left to right.

Answer 1

Add event.preventDefault in the mousedown section.

$('#container').on('mousedown', '#marker', function(event){
    event.preventDefault();
    $(document).on('mousemove', function(event){
        rotateAroundCircle($('#innerCircle').parent(), event.pageX,event.pageY, $('#marker'));
    });
});

I modified your fiddle accordingly and did corner testing. Seemed to work fine. New Fiddle