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


Tags: javascript,jquery,css

Problem :

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.



Solution :

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


    CSS Howto..

    how to give style to the selected option in html

    Using CSS to style a Sencha Touch form - how do I find the elements?

    How to get same height to two sibling buttons

    How can I rotate(or change) background image using CSS and Javascript

    How do I remove the last border on my nav bar?

    How to set Highcharts data series in x-axis using crosshairs?

    How to resize image in css without cropping it? [closed]

    How to calculate effective CSS for a DOM node using PHP

    css how to select a class in another div

    EXTREME beginner making a website from scratch, how do i center things, pictures, and zoom problems

    How do you have a hidden div appear and change sizes using css or jquery?

    how to link and apply external css file

    how to create divs rowwise in css

    How to dynamically generate CSS3 keyframe steps using SASS?

    How can I center the table in the page?

    How to order properties in a declaration block? [closed]

    how to set button background such that it takes up height and width of parent div? what css property affects which dimension?

    Show Pinterest hover buttons only on images with specified class

    How to make background image fade in with css when page loads?

    How to show a node in a block in drupal 7

    sencha touch 2.0 : How to apply conditional background color to list item

    How does tablesort.js create the sort indicator arrows

    CSS - how to hide the top of a container using CSS-height, vertical-align and overflow?

    How to style a table-like div with css? How to fill a “column”?

    How can I resize these divs while keeping the same layout?

    css/jquery - how to hide last row of floated elements if not even

    how to change “product details” text to my own text in Virtuemart?

    How do you disable horizontal scrolling on a webpage?

    How to make css opacity property not to be inherited from parent div´s?

    How do I vertically centre a div of variable height within a div of variable height?