Stacking order when you have multiple modal dialogs and popovers in the top layer is based on most recently revealed element, so that toast that just opened is now hidden under a dialog. Anchoring is currently only supported in Chrome, so popover tooltips show up in the corner. Firefox supports transition animations when opening a dialog but not closing it. The web platform feature needed to tie the mobile back button to closing a dialog isn't actually implemented yet. Frameworks that patch the DOM might clobber modal dialog state because it's a function of both the "open" attribute and the result of showModal().
Some of these will improve but I think the display order problem is here for the long haul.
Whenever I have to fight something like this it always makes me question the goodness of the pattern to begin with. Stacking multiple modals/popovers/tooltips can’t be a great UX (or accessibility) pattern, can it? I find at least half the time that I’m fighting the browsers it’s because I’m trying to do something suboptimal
The ImageViewer has a context menu popover that needs to appear above the modal that contains it. Using the Popover API lets me be sure that there'll be no z-fighting, the popover won't be clipped by its parent element, and that the popover will dismiss correctly when the user wants it gone. It's pretty great, and I don't think it harms accessibility any more than _having_ a context menu in the first place harms it. And the UX is fine.
(Aside from some hellish work making it so that `oncontextmenu` can actually open a popover. According to the spec, right button mouseup triggers light dismiss, closing the context menu as soon as it opens)
Definitely registers as poor UX in my book.
What I'm talking about is if I'm using popover to alert the user about something, let's say another user updated the page they were viewing, and they clicked into a confirmation dialog fractions of a second after the alert arrived, the alert is now behind the dialog and attempting to click on it either does nothing or closes the dialog, depending on how I've configured the dialog.
As the application developer, I'm responsible for deciding how the modes in my multi-modal application behave, and I want top-level alerts like this example to be interactable and in front of confirmation dialogs in all modes, regardless of which one opened first. With the current top layer behaviour, that is not really achievable without doing something like reparenting open alert popovers into the most recently opened dialog, and that's ALSO not properly functional (element state gets reset) until Element.moveBefore() is generally available.
The website sets `[data-theme="dark"]` via javascript on page-load so that its light/dark toggle button works, and its stylesheets duplicate every style from `prefers-color-scheme` to `[data-theme="dark"]`. The duplication messed up `--astro-code-bg` and copied from the light scheme.
vintagedave•6mo ago
Yet I would view a hint as one that appears simply on hover: a tooltip.
The article jumps ahead "But wait, didn’t clicking on the hint popover close the auto one? ... Because you’re inducing an action (click), it activates the light-dismiss of the auto popover. This is almost certainly not what you want when you’re creating a hint popover." but completely omits what a hint is supposed to be in the first place and whether this actually is a hint. As far as I can tell, this hint type of popover is not actually behaving like a desktop-style tooltip hint.
cwillu•6mo ago
vintagedave•6mo ago