Re: [csswg-drafts] [css-display] Interaction gotchas when delaying the effect of `display: none` (#8389)

I want to bring an issue I encountered while playing with the `display` transition.

The issue is: the inert behavior makes it impossible to implement an affordance period for tooltips on hover. Here is a CodePen that demonstrated the issue following issue — https://codepen.io/kizu/pen/rNQBvKm?editors=1100

Note: it seems that there could've been some change in Chrome Canary that broke the `display` transitions in one of the latest build, so I couldn't reproduce them at all in the above CodePen or in other demos, so here is a screen recording showing the behavior when it was working:

https://github.com/w3c/csswg-drafts/assets/177485/b940f31e-b8af-4a83-99c9-1f38d6a9b2e2

The way developers usually apply the additional affordance for tooltips on hover is by adding an additional _delay_ before the actual animation duration, allowing the following things:

1. When there is a gap between the target and the tooltip, it makes it possible to move the cursor to the tooltip content without losing it.
2. When the path from the tooltip target to the tooltip content lies diagonally, this additional delay allows users to not “lose” the tooltip if they manage to move the cursor through this delay.
3. It adds just an additional affordance, smoothing small mouse cursor control issues, like when the cursor accidentally exits the target or the tooltip, not hiding the tooltip immediately.

These are in line with the https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html, both for the “Hoverable” and “Persistent” success criteria.

The problem right now is that the _inert_ (and `pointer-events: none` — I'm not sure if the “inert” includes it?) behavior kicks in right away when the element gets the `display: none`, making the method of using the `delay` useless, as it becomes not possible to return the cursor to the tooltip.

Proposed solutions:

1. Only make the tooltip `inert` and `pointer-events: none` during the `duration`, but not during the `delay` when transitioning the `display` to `none`.
2. Keep the `inert` behavior as described in the issue, but still allow `pointer-events` both for the `duration` and the `delay` (this would make the usage for tooltips in line with how transition for `visibility` works).
3. Allow developers to control the `inert` (and, if necessary `poiner-events`) during the transition, similar to how we can control the top layer transition via [`overlay`](https://drafts.csswg.org/css-position-4/#overlay) — I think this is a very similar case, and exposing the control for the `inert` only as a part of a transition seems like an ok idea?
4. Any other solution that could solve this use case.

-- 
GitHub Notification of comment by kizu
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8389#issuecomment-1592482614 using your GitHub account


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

Received on Thursday, 15 June 2023 07:06:47 UTC