2

Is there a solid solution for supporting hi-dpi / Retina custom cursors? It seems there is no standard way to supply standard dpi and hi-dpi graphics for use in the cursor.

Switching the cursor style using media queries is useless because there is no way to control the cursor dimensions so an @2x image is displayed at twice the size rather than the same size with double resolution.

I have tried using an SVG image for the cursor, but Chrome (latest) renders this at standard resolution.

Browser support: Modern browsers + >=IE9

Undistraction
  • 42,754
  • 56
  • 195
  • 331

1 Answers1

2

Maybe this helps:

.cursor {
  cursor: url("cursor.png") 0 0, pointer; /* Legacy */
  cursor: url("cursor.svg") 0 0, pointer; /* FF */
  cursor: -webkit-image-set(url("cursor.png") 1x, url("cursor@2x.png") 2x) 0 0, pointer; /* Webkit */
}
user648519
  • 177
  • 2
  • 10