CSS cursor position attribute not working in Safari

Question

I show my own image for the cursor. I use jQuery to change the cursor image to mousedown, and manually set the x and y properties of the cursor to the width and height of the image, so that it looks like the image rotates from the registration point at the bottom - the image of the image.

Matching CSS:

#face-container { cursor: url(../img/cursor_eel.png) 52 128, auto; } #face-container.punching { cursor: url(../img/cursor_eel_rotated.png) 127 127, auto; } 

jQuery adds the punching class to mousedown and removes it on mouseup.

In Chrome and Firefox, this works as expected - the image appears shifted by the x and y values ​​specified in CSS, and on the monsoon image, the cursor image rotates around the registration point in the lower right corner (tail from eel).

In Safari 9.0.1 (Mac OS 10.10.5), it does not seem to accept the x and y values, so the image is displayed in the upper left corner of the cursor position, and in the multi-down image, the cursor image seems to rotate around the registration point in the upper left corner (nose eel).

How can I make Safari move the cursor image position as indicated and make the mousedown effect the same as in Chrome?

Full demo here

Github repository here

Answer 1

It seems that Safari calculates the size of the cursor image compared to another browser. Setting it to the exact image size will not work.

For example, with a 50px x 50px image, if you set the cursor position to 50 50, it treats it as 0 in Safari - maybe it just ignores it. In Chrome, this will match the actual image size if the number is larger than the actual image size.

See: https://jsfiddle.net/bb335rgk/1/

But set it one pixel smaller than the actual image size, and it will accept it. In your case, since you do not have to be so precise, it can be good enough. Like this:

 #face-container { cursor: url(../img/cursor_eel.png) 51 127, auto; } #face-container.punching { cursor: url(../img/cursor_eel_rotated.png) 126 126, auto; }