Tips for avoiding cursor sticking in css rotate transform in firefox?

Question

Tips for avoiding cursor sticking in css rotate transform in firefox?

I have a unique challenge in this code where I want the user to grab the black square and rotate it around the inner circle.

Check out the code snippet here.

While attempting to rotate the square, you might notice that the cursor sometimes gets stuck in Firefox. This prevents the $(document).off('mousemove'); from executing unless you click again to trigger the mouseup event handler.

This issue seems to be specific to Firefox as IE, Chrome, and Safari are working fine (although Chrome crashes if you rapidly click on the black square).

Is there a way to enhance this code to prevent the cursor from getting stuck in Firefox?

NOTE: If you're struggling to replicate the stuck cursor issue, try clicking and holding one of the bottom corners of the black box without moving it, then quickly move your cursor left to right.

javascript jquery css

Answer 1

Answer №1

Make sure to include event.preventDefault in the mousedown block.

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

I updated your fiddle and tested it with different corner cases. Everything seems to be working well. Check out the updated Fiddle here

Answer 2

Make sure to include event.preventDefault in the mousedown block.

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

I updated your fiddle and tested it with different corner cases. Everything seems to be working well. Check out the updated Fiddle here

Tips for avoiding cursor sticking in css rotate transform in firefox?

Answer №1

Similar questions

Should I consider implementing Flexbox even if I need to cater to users still using IE9?

What is causing the resistance in changing the color of my current navigation items?

What is the best way to create dynamic cards like the ones displayed here?

Attempting to have this .js lightbox appear as soon as the page loads

Angular - Manipulating the selected option in a select box from the controller

What is the best way to align a search box within a Bootstrap navbar?

Is there a way to exclusively use ES6 to import jQuery from an npm package?

Steps for eliminating a column from a table

Changing the color of a text box when it is disabled can be achieved through JavaScript

What is the best way to insert a row into a JavaScript table while incorporating a cell that utilizes the datepicker function in jQuery?

Position a form in the center of a container and showcase an additional div on the right with an indentation

Using CSS transforms to place the vanishing point

Analyzing and sorting two sets of data in JavaScript

"One specific div in Safari is having trouble with the external stylesheet, while the other divs are functioning properly- any

What is the suitable condition necessary for optimal functionality?

"Utilize jQuery to load a file when hovering over a specific

What causes delayed state updates in React/NextJS until another state is updated or a fast refresh occurs?

Efficient File Upload Feature Compatible with all Browsers, Including Internet Explorer versions 7, 8, and 9

Having difficulty retaining the value of a variable following the retrieval of JSON data

Anticipate feedback from Python script in Node.js