csstools / csstools/normalize.css

Dialogs cannot be shown with the Popover API

Open Beginner friendly
#34 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.