csstools / csstools/normalize.css
Dialogs cannot be shown with the Popover API
- Dominant language
- HTML
- Stars
- 656
- Forks
- 66
- PR merge metrics
- No merged PRs in 30d
Description
The following rule prevents `` elements from being shown with the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API):
```css
:where(dialog:not([open])) {
display: none;
}
```
This codepen demonstrates the issue: https://codepen.io/pokeplun/pen/GgjdgQx
The methods of showing the `` that treat it as a popover don't result in a state that matches `dialog[open]` (they only match [:popover-open](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:popover-open)), which results in the element never being shown by default.
`` is perfectly reasonable semantically, so this seems like a bug
Contributor guide
Research direction
Start by reproducing the dialog/popover behavior in the linked CodePen, then locate the shown `dialog:not([open])` rule in the stylesheet. Update the normalization so a `` can be displayed, and verify that both ordinary dialogs and popover dialogs remain correctly visible or hidden.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 72/100