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

Thankful

The rotation seems to be working fine in Safari on my computer. I've read that some experiencing issues with the cursor in Safari fixed it by either open up a new tab, or by restarting the browser. Some hang up of some sort.. – Homophone

@Homophone Opening a new tab and restarting the browser did not resolve it for me. I also updated the question with animations showing the results I am seeing in Chrome and Safari. – Thankful

Try adding unit measurement to the values - 52px 128px and 127px 127px – Hamner

@Hamner Tried it, and that did not adjust the cursor position in Safari - it also made the cursor image not appear. – Thankful

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;
}

Admixture

That did it! I will award the bounty as soon as StackOverflow lets me (17 hours). – Thankful

Thanks @Julien, I would've never thought of that! – Internal