RESOLVED DUPLICATE of bug 291174291755
Safari 18.4 :has(+ :popover-open) child styles aren't removed on popover close
https://bugs.webkit.org/show_bug.cgi?id=291755
Summary Safari 18.4 :has(+ :popover-open) child styles aren't removed on popover close
Austin
Reported 2025-04-18 10:11:36 PDT
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
Austin
Comment 1 2025-04-18 10:21:28 PDT
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)
Comment 2 2025-04-18 10:58:32 PDT
*** This bug has been marked as a duplicate of bug 291174 ***
Note You need to log in before you can comment on or make changes to this bug.