[csswg-drafts] Top-layer breaks existing element-based custom cursors (#9813)

knowler has just created a new issue for https://github.com/w3c/csswg-drafts:

== Top-layer breaks existing element-based custom cursors ==
## Background

A common technique for implementing custom cursors is to set `cursor: none` and have an element act as the cursor instead (i.e. using JS to make the fixed element follow the cursor’s coordinates). This is usually done to allow for greater customization and animation that CSS currently cannot achieve with its own cursor related properties. It’s worth noting that techniques as such can be very bad for accessibility, performance (i.e. low battery mode can limit the frame rate of the custom cursor’s updates), and in bringing this up I’m not advocating the use of the technique.

## Top layer breaks this existing technique

With the introduction of “top layer” used by the HTML `<dialog>` element as well as the Popover API, this technique of creating a custom cursor becomes unusable as it relies on a very high `z-index` to stay above other content. It is possible to hack the Popover API using a manual popover for the cursor as a way to circumvent this, but that has limitations (i.e. `toggle` events doesn’t bubble, aren’t yet emitted from `<dialog>` elements, and can’t be detected through shadow roots).

I don’t have any proposals about what to do, but I wanted to bring this to the attention of the CSSWG as I do think there could be room for a solution in CSS. 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9813 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 17 January 2024 21:15:44 UTC