[csswg-drafts] [css-view-transitions] Cursor and hover effect behaviour (#11274)

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

== [css-view-transitions] Cursor and hover effect behaviour ==
A couple of related 'issues' I've heard from developers:

- The mouse cursor 'toggles' during the transition
- The hover state 'toggles' during the transition

Here's a demo: https://codepen.io/jaffathecake/pen/gOVVxyO

What they're referring to is behaviour they see in Chrome:

https://github.com/user-attachments/assets/9d01c109-3b5e-4276-912b-6c23459ee8b6

These behaviours can be explained by the following rule: The page becomes not-interactive before the 'old' capture, and interactivity returns at the end of the transition. As such, captures are taken without hover effects, and no `cursor` rules apply (aside from those on `html`) until the end of the transition.

This seems sensible, but it's clearly visually undesirable.

Things look differently in Safari:

https://github.com/user-attachments/assets/a3b4ef89-ae35-4bde-8faf-8a748d08fcd6

Initially it seems like it fixes the issue, but I think the above is the result of a bug. I think the rule is: Pointer activity is ignored from before the 'old' capture, until the first pointer move after the transition. 'Ignored' as in hovered items stay hovered, and `cursor` is not recomputed.

To prove this, I created a modified version of the demo, which swaps the button for a clone within the `startViewTransition` callback:

https://github.com/user-attachments/assets/24c247a8-8de0-4c9d-acc3-7fbdf174a169

The theory seems to fit.

# A solution?

Here's an idea that takes what Safari is doing but makes it a bit more deliberate:

- Capture 'old' state including hover effects. This is what Safari does.

For the rest, here's two options:

- Option 1: Calculate hover effects for the 'new' state, including `cursor`, and hold this state until the end of the transition. At the end of the transition, recalculate hover effects, including `cursor`. Don't wait for pointer-move like Safari.
- Option 2: Calculate hover effects for the 'new' state 'live'. As in, as the mouse moves, recalculate hover effects based on the current DOM (the 'new' state).

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


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

Received on Tuesday, 26 November 2024 10:22:53 UTC