Атрибут позиции курсора CSS не работает в Safari

Question

Я показываю собственное изображение для курсора. Я использую jQuery, чтобы поменять изображение курсора на mousedown, и вручную задал свойства x и y курсора на ширину и высоту изображения, так что он выглядит так, как будто изображение вращается из точки регистрации в нижней части Прямо с изображением.

Соответствующий 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 добавляет класс "пробивки" на MouseDown и удаляет его на MouseUp.

В Chrome и Firefox это работает так, как ожидалось - изображение появляется с изменением значений x и y, указанных в CSS, а на мульдауне изображение курсора поворачивается вокруг точки регистрации в правом нижнем углу (хвост угря).

В Safari 9.0.1 (Mac OS 10.10.5), это, кажется, не принимают х и у значения, поэтому изображение появляется в верхнем левом углу позиции курсора и на мышеловке изображение курсора поворачивается вокруг точки регистрации в левом верхнем углу (нос угря).

Как я могу получить Safari, чтобы изменить положение изображения курсора, как указано и сделать MouseDown эффект работы как в Chrome?

Full demo here

Github repository here

Answer 1

Похоже, Safari вычисляет размер изображения курсора против позиции точки доступа иначе, чем другой браузер. Установка его в точно размере изображения не будет работать.

Например, с изображением 50px x 50px, если вы установите положение курсора на 50 50, он рассматривает его как 0 в Safari - возможно, просто игнорирует его. В Chrome будет установлен фактический размер изображения, если число больше фактического размера изображения.

См: https://jsfiddle.net/bb335rgk/1/

Но установить это только один пиксель меньше фактического размера изображения, и он будет принимать его. В вашем случае, поскольку вам не обязательно быть настолько точным, это может быть достаточно хорошим. Например:

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

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