CSS cursor position attribute not working in Safari

Question

I'm showing a custom image for a cursor. I'm using jQuery to swap the cursor image on mousedown, and I manually set the x and y properties of the cursor to the width and height of the image, so that it appears as though the image rotates from a registration point in the bottom-right of the image.

The relevant CSS is:

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

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

The jQuery adds the "punching" class on 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 the CSS, and on mousedown, the cursor image appears to rotate around a registration point in the bottom-right (the tail of the eel).

In Safari 9.0.1 (Mac OS 10.10.5), it doesn't seem to accept the x and y values, so the image appears in the top-left of the cursor position, and on mousedown, the cursor image appears to rotate around a registration point in the top-left (the nose of the eel).

How can I get Safari to move the cursor image position as specified and make the mousedown effect work as in Chrome?

Full demo here

Github repository here

Answer 1

It looks like Safari calculates the cursor image size vs hotspot position differently than other browser. Setting it it to exactly the image size won't work.

For example, with an image of 50px x 50px, if you set cursor position to 50 50, it treats it as 0 on Safari - probably just ignores it. On Chrome, it'll set it to the actual image size, event if the number is greater than the actual image size.

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

But set it just one pixel less than actual image size and it'll accept it. In your case, since you don't have to be that precise, it might 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;
}