Custom cursor clear on retina display (really working technique)

Question

I have read a lot of discussions and articles, but none from a single solution to solve this problem. The quality of custom cursors on retina devices is inadequate (they are blurred) and I wonder if there is a method that ensures adequate quality even on these devices. I tried to use both .svg and .png files and to use various css techniques:

1) the classic formula

body {
  cursor: url ("assets/cursors/pointer.png"), pointer;
}

2) the media queries with a specific pointer for these devices

@media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {  
 body {
  cursor: url ("assets/cursors/[email protected]"), pointer;
 } 
} 

3) cross browser solution

body {
  cursor: url ("assets/cursors/pointer.png") 0 0, pointer; /* Legacy */
  cursor: url ("assets/cursors/pointer.svg") 0 0, pointer; /* FF */
  cursor: -webkit-image-set (url ("assets/cursors/pointer.png") 1x, url ("assets/cursors/[email protected]") 2x) 0 0, pointer; /* Webkit */
}

Of all the discussions here on Stack Overflow the one at this link SVG mouse cursor blurry on Retina display which uses jQuery instead of using CSS code, seems to be the only one effective in terms of quality; unfortunately, however, presents the problem of the scroll.

Does anyone have a solution in case you want to use the solution via CSS and the one via jQuery?

Answer 1

I was discussing it with W3C guys recently, and we agreed, that we should do it with image-set() . See here: https://github.com/w3c/csswg-drafts/issues/2480 .

cursor: image-set( "foo.png" 1x, "foo-2x.png" 2x), pointer;

Sadly, Firefox has been ignoring it for years, so there is no way to make it work in FF today: https://caniuse.com/#feat=css-image-set

I am trying hard to convince FF guys to implement it, but sadly, nobody has time for it :( But at least they work hard to let you synchronize bookmarks from your toaster.