Bug 291755
| Summary: | Safari 18.4 :has(+ :popover-open) child styles aren't removed on popover close | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Austin <austjonez+dev> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | bfulgham, ntim, simon.fraser, zalan |
| Priority: | P2 | ||
| Version: | Safari 18 | ||
| Hardware: | Unspecified | ||
| OS: | iOS 18 | ||
Austin
HTML:
<button id="mobile-menu-button" popovertarget="mobile-menu" type="button" aria-label="menu toggle">
<span></span>
<span></span>
<span></span>
</button>
<dialog popover id="mobile-menu">...
CSS:
#mobile-menu-button:has(+ [popover]:popover-open) span:nth-child(1) {
transform: rotate(45deg);
background: red;
}
Opening the popover menu, the rotate (and debugging background color) apply just fine but closing the closing the popover by any means (escape key, light dismissal, clicking the button) does not update the child spans. Styles applied to just the element parent element are removed though.
ex:
#mobile-menu-button:has(+ [popover]:popover-open) {
background: red;
}
This does remove the background color when the popover is closed.
I also tested adding and removing a class instead of relying on the :popover-open pseudo class and selecting the child spans and this does update.
ex:
#mobile-menu-button:has(+ [popover].is-open) span:nth-child(1) {
transform: rotate(45deg);
background: red;
}
I've double checked that the :popover-open pseudo class is being fully removed with `target.matches(':popover-open')` on the same toggle listener I used to test adding the class and that is also showing that it is. Just for some reason, the updates aren't cascading down to the child elements.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Austin
Another Issue I noted, I have a blur applied to the background when the popover is opened.
nav:has([popover]:popover-open)::before {
visibility: visible;
opacity: 1;
}
When the popover is closed, the blur also still remains. However, scrolling the page a little bit fixes these styles. This can sometimes happen when you use js to scroll the page with window.scrollBy(0, 100) but the results of it working have been inconsistent. Interestingly enough, even though the backdrop's styles get reverted and the blur is removed, the button spans are still red and have not reverted.
Simon Fraser (smfr)
*** This bug has been marked as a duplicate of bug 291174 ***