CSS-Cursor-Positionsattribut funktioniert nicht in Safari

Question

Ich zeige ein benutzerdefiniertes Bild für einen Cursor. Ich benutze jQuery, um das Cursor-Bild bei mousedown zu vertauschen, und ich setze die x- und y-Eigenschaften des Cursors manuell auf die Breite und Höhe des Bildes, so dass es aussieht, als ob das Bild von einem Registrierungspunkt im unteren Bereich rotiert - Recht des Bildes.

Der entsprechende CSS ist:

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

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

Die jQuery fügt die "Stanzen" Klasse auf mousedown- und entfernt sie auf mouseup.

In Chrome und Firefox funktioniert dies wie erwartet - das Bild wird um die im CSS angegebenen x- und y-Werte verschoben angezeigt, und beim Mousedown dreht sich das Cursorbild um einen Registrierungspunkt in der unteren rechten Ecke Schwanz des Aals).

In Safari 9.0.1 (Mac OS 10.10.5), es scheint nicht zu den x- und y-Werte zu übernehmen, so dass das Bild oben links von der Cursorposition erscheint in und Beim Mausklick scheint sich das Cursorbild um einen Registrierungspunkt in der oberen linken Ecke (der Nase des Aals) zu drehen.

Wie kann ich Safari die Cursor Bildposition zu bewegen, erhalten wie angegeben und MouseDown- Effekt funktioniert wie in Chrome machen?

Full demo here

Github repository here

Answer 1

Es sieht aus wie Safari die Cursor Bildgröße vs Hotspot Position anders als anderer Browser berechnet. Es auf genau die Bildgröße einzustellen wird nicht funktionieren.

Zum Beispiel, mit einem Bild von 50px x 50px, wenn Sie Cursor-Position auf 50 50 setzen, behandelt es es als 0 auf Safari - wahrscheinlich ignoriert es einfach. In Chrome wird das Ereignis auf die tatsächliche Bildgröße festgelegt, falls die Anzahl größer als die tatsächliche Bildgröße ist.

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

Aber legen Sie es nur ein Pixel weniger als die tatsächliche Bildgröße und es wird es akzeptieren. In Ihrem Fall, da Sie nicht so genau sein müssen, könnte es gut genug sein. Wie folgt:

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

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