User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36 Steps to reproduce: CSS allows setting custom cursors: cursor: url("image.png") 30 30, auto; The problem starts, when the environment has window.devicePixelRatio (DPR) greater than 1 (which will be on all devices in the future). Firefox and Chrome "stretch" such cursors according to DPR. As a result, cursors are not pixel-perfect. Chrome allows -webkit-image-set() as the value, to make crisp cursors for specific DPR value, but there is no way to use crisp cursors in Firefox. Also, the cursor origin (30 30) is interpreted differently in Chrome and FF (so there is no way to set the picture to the center for both browsers, creators must make different CSS for each browser). We need a way to use crisp cursors on hi-dpi displays. Please, connect with other browsers and find a solution, that will work the same way everywhere. I suggest ignoring DPR and drawing the pixels of the cursor to hardware pixels (standard CSS cursor values also don't scale with the DPR). Another solution would be implementing the image-set property.

Regarding the origin (30 30). There is a part of DPR given by the OS, and another part given by the browser. E.g. the DPR of 1.875 can be 125% by the OS and 150% page zoom in the browser. Firefox scales the image according to the full DPR, but expects the origin to be pre-scaled by the OS DPR (which the web page can not access, it accesses only the full DPR).

Could you provide a test-case please, ideally on a standalone HTML file? That would make this much easier to see and figure out a solution and the difference between Firefox and other browsers.

Isn't the `resolution` @media feature usable to select different cursor images per dpi? https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution

Here is an example: http://www.ivank.net/veci/cursors_dpr.html Crisp cursors are possible today only in Chrome using -webkit-image-set() . Even the first (standardized) example looks different in Chrome vs. FF: it is not centered correctly in Firefox. Note, that you can see all this only when your OS has the "zoom" of 125%.

Is here any chance you will fix it? There is no way to have a crisp cursor in Firefox, it is always scaled by devicePixelRatio :(

(In reply to Masatoshi Kimura [:emk] from comment #3) > Isn't the `resolution` @media feature usable to select different cursor > images per dpi? > https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution It looks like whatever cursor you selected would still end up getting scaled up and pixellated... I think you'd just get a similar form of what Ivan is talking about, though with a smaller (but still pixellated) image. Though I'm happy to be proven wrong. :) (This is because -- unlike 'background' / <img src="..."> -- you can't specify the size of CSS cursors in CSS pixels, I think... Or if you can, I don't know how. If you could, then you could e.g. use a 200px cursor and ask that it be drawn as 100px wide, and look crisp on 2x pixel-ratio configurations. But I don't think that's possible right now.) (In reply to Ivan Kuckir from comment #4) > Even the first (standardized) example looks different in Chrome vs. FF: it > is not centered correctly in Firefox. I can reproduce this in Firefox on Windows. This seems like a bug, and is probably worth tracking independently. I'll file a separate bug for that: bug 1449365. (In reply to Ivan Kuckir from comment #5) > Is here any chance you will fix it? Sure! But I don't think anyone here has had time to look into this in detail yet, sorry. :-/ And we'd need to come up with a concrete proposal in collaboration other browsers before committing to implementation work (which may or may not look like this webkit-image-set thing). You're free to bring this up with the CSS Working Gro8up yourself, as a spec issue on the https://drafts.csswg.org/css-ui-3/ spec! You'd file that under this category: https://github.com/w3c/csswg-drafts/labels/css-ui-3

W3C guys suggest to do it with image-set , which is not supported in Firefox (but -webkit-image-set is available in Webkit). https://github.com/w3c/csswg-drafts/issues/2480 Can we do it with image set? If not, can you express your feelings about image-set at the GitHub discussion?

Thanks for starting that discussion. I hadn't realized that -webkit-image-set was tied to something in an actual spec, but I guess it is, and it sounds like that feature would indeed address this use case. Looks like that "image-set" feature is covered by bug 1107646 -- adding dependency. For the time being, can you also address this use-case by using SVG rather than PNG for your cursors? I'd hope that a SVG cursor would draw crisply regardless of underlying screen resolution.

That was my first idea, to use SVG cursors to overcome this issue (and use supersampled PNGs inside SVGs). But Firefox rasterizes SVG into the 1-to-1 bitmap, and then scales it just like if it was PNG. I updated my demo: http://www.ivank.net/veci/cursors_dpr.html Chrome does the same thing.

Guys, so can you please implement the image-set() feature? I really need to use custom cursors in my app, and because of Firefox, I am waiting, since a lot of my users use Firefox.