Search code examples
csssvgcross-browsercompatibility

Is there a way to make Chrome display the SVG cursor as it is in Safari?


I am using an SVG file as the mouse pointer in CSS. Safari displays it correctly where Chrome displays black dots around it, like poorly made transparent GIF artifacts.

Check the fiddle in Safari and Chrome respectively, you will see what I mean.

.element {
   ... 
   cursor: url(http://wiki.ooo4kids.org/images/b/b3/Cursor-Hand.svg), e-resize;
   ...
}

http://jsfiddle.net/cdolek/nx6st28k/7/

Is there a way to make them look the same?

Gif animation

Mac OS X Yosemite 10.10.5 (14F1021)

  • Left: Chrome Version 46.0.2490.86 (64-bit)
  • Right: Safari Version 9.0.1 (10601.2.7.2)

GIF url: https://dl.dropboxusercontent.com/u/1324709/screencap.gif


Solution

  • Looks like a bug inside chrome 46

    Chrome 45: Chrome 45

    Chrome 46: enter image description here

    Chrome 47: enter image description here