[css-ui-4] Showing crisp cursors

[photopea]

Today, there is no way a website can provide "crisp" custom CSS cursor. Every browser scales the cursor image up according to devicePixelRatio (just like browsers do with image, canvas and other elements).

Here is a demo: http://www.ivank.net/veci/cursors_dpr.html

The cursor center (in "px" units) is interpreted as scaled up by devicePixelRatio in some browsers (so even the first example looks different in FF versus Chrome - a different center spot).

My proposal is to interpret cursor images always in hardware-pixel coordinate space. Websites can simply provide larger images, when devicePixelRatio is large.

Other solutions would lead to new CSS parameters and new sources of confusion.

[frivoal]

(relbeling to css-ui-4, as that's the latest draft for css-ui)

[frivoal]

As the default behavior, browsers agree to work in css-pixel space, so we cannot change the default, and I don't think we should even if we could, as having a correctly sized cursor in all browsers seems more important than having it crisp.

That said, having crisp cursors is a reasonable feature to ask for.

I believe that the spec already offers an adequate solution for that, even though it isn't implemented yet:

User Agents may, instead of <url>, support <image> which is a superset.

If you have a look at the definition of <image> in css-images-4. It includes, among other things, image-set()

So, putting that together, this is valid per spec:

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

I believe that should solve the problem you raised. If so, this is "merely" a matter of getting browsers to support it. Based on that, I think we can close this issue. Do you agree?

[photopea]

I think this is a nice solution. But Firefox has been avoiding implementing image-set for years. Maybe somebody from FF could tell us why they don't like it?

Also, the hotspot of cursor should be in CSS pixels or hardware pixels? And what about the case when it is combined with image-set?

cursor:url(http://placehold.it/50x30) 25 15, auto;

[frivoal]

The hotspot should be in css pixels, so that it works for all the images in the css (as long as they are the same image at different resolutions, which they should be).

As for why FF hasn't done it, I can't tell for sure (since I am not with Mozilla), but I suspect it is more a matter of priorities than a matter of disagreement.

[frivoal]

cc @dbaron, in case you want to comment.

[svgeesus]

The hotspot should be in css pixels, so that it works for all the images in the css (as long as they are the same image at different resolutions, which they should be).

Agreed they should be (which is equivalent to user units for SVG cursors). This should be tested though, in particular because the native hotspot position (for those raster formats which encode a hotspot) will be in physical pixels (before any upsampling or downsampling to the used resolution). So there is a fair risk that implementations will stuff the CSS values into the same place, in already deployed code.

[frivoal]

Cannot actually test anything until the browsers start supporting it, but we can write the tests even if we cannot run them (adding the label as a reminder to do so). However, these will unfortunately have to be manual tests, which don't work all that well for actively preventing mistakes, since they won't be part of any browsers' CI.

[upsuper]

Isn't everything with image-set() already doable with @media (resolution)?

[frivoal]

Isn't everything with image-set() already doable with @media (resolution)?

No:

• you'd need to be able to set the cursor's width and size independently from it's intrinsic size, which you currently cannot do. (you can do it on background images, but not on cursors). Absent that, you need a way to indicate the intrinsic resolution of the image, so that it gets scaled correctly. image-set() provides that.
• image-set() allows the browser to be smart about which image to load (based on bandwidth, screen resolution, presence of multiple displays, etc). @media does not.

[Malvoz]

On top of that, you could try image-rendering?

[photopea]

@Malvoz image-rendering is absolutely unrelated to this. We are talking about what should be the ratio between CSS and hardware pixels. We deal with image-rendering when this ratio is already know.

[frivoal]

@astearns @atanassov Since this issue is boils down to a request for tests, rather than a spec problem, I think it should be moved to wpt. Does that seem ok to you?

[photopea]

Yes, I think the specification is clear to me now.

It works correctly in Chromium, but still does not work in Firefox. I think it is one of many reasons why all browsers will be Chromium-based soon, and Firefox will disappear.

[capr]

having a correctly sized cursor in all browsers seems more important than having it crisp

See that's just wrong. Windows would never show a blurry cursor on devicePixelRatio=1.25, people would go mad. So they chose to show a crisp cursor, even if it's slightly smaller. So most browser users with a mouse already see crisps cursors over correctly sized cursors for years now.

Lastly, image-set() doesn't solve the problem. I don't want to provide 4-5 images for each cursor and pray that it matches every dpr out there, I just want an option to disable this silly feature.