Bug 291174 – REGRESSION (286644@main): style invalidation for `:has(+:popover-open)` doesn't work properly

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Leevi]

Given the following HTML + CSS

```html
<div>
  <button popovertarget="p1">Open Popver 1</button>
  <div popover id="p1">Popover 1</div>
</div>

<div>
  <button popovertarget="p2">Open Popver 2</button>
  <div popover id="p2">Popover 2</div>
</div>
```

```css
button:has(+:popover-open) {
  outline: 1px solid red;
}
```

When clicking on "Open Popver 1" the button correctly has a red outline. Immediately clicking on "Open Popver 2" should:

1. close `#p1`, 
2. remove the red outline from "Open Popver 1"    <--- Fails
3. open `#p2`
4. add the red outline from "Open Popver 2" 

The actual result is that Open Popver 1 still has the red outline.

Example: https://codepen.io/leevigraham/pen/xbxermr

[Leevi]

(In reply to Leevi from comment #0)
> Given the following HTML + CSS
> 
> ```html
> <div>
>   <button popovertarget="p1">Open Popver 1</button>
>   <div popover id="p1">Popover 1</div>
> </div>
> 
> <div>
>   <button popovertarget="p2">Open Popver 2</button>
>   <div popover id="p2">Popover 2</div>
> </div>
> ```
> 
> ```css
> button:has(+:popover-open) {
>   outline: 1px solid red;
> }
> ```
> 
> When clicking on "Open Popver 1" the button correctly has a red outline.
> Immediately clicking on "Open Popver 2" should:
> 
> 1. close `#p1`, 
> 2. remove the red outline from "Open Popver 1"    <--- Fails
> 3. open `#p2`
> 4. add the red outline from "Open Popver 2" 
> 
> The actual result is that Open Popver 1 still has the red outline.
> 
> Example: https://codepen.io/leevigraham/pen/xbxermr

Clicking outside the popover to auto dismiss doesn't remove the outline either… I think this is the real cause of the issue.

[Leevi]

Created attachment 474850 [details]
Video of issue

[Alexey Proskuryakov]

Thank you for the report! I can reproduce this in Safari 18.4, and cannot reproduce in Safari 18.3.1.

Would it be possible for you to clarify user impact of this issue? Does this affect any live websites or apps, especially popular ones?

[Radar WebKit Bug Importer]

<rdar://problem/148774717>

[Leevi]

Hi Alexey,

I discovered this issue in production on one of our client sites https://www.hunterwater.com.au which is a regional water provider.

I'm currently resolving this by adding a style tag injected by GTM until we can schedule a deployment.

You can see the inline style tag towards the bottom of the HTML in the inspector:

```
<style>
  .SiteNavigation-level1ItemButton[popovertarget]:after {
    display: none !important
  }
</style>
```

Deleting the style node and then clicking on the main nav demonstrates this behaviour in production.

[Leevi]

We're using the css rule to add the white arrow below the currently selected navigation item.

[Simon Fraser (smfr)]

*** Bug 291755 has been marked as a duplicate of this bug. ***

[Austin]

I think I might have found a workaround for the time until this gets fixed. I was about to post this in ^Bug 291755 but I'll post it here instead.

Quick summary: I've run into a similar situation only it's the child selectors of :has(+:popover-open) aren't updating after close (ie :has(+:popover-open) span or something). For us it was spans inside a hamburger menu and a background blur.

Possible workaround:
We are using UIkit on our site and I noticed that when the slide out menus from that were opening, the spans and blurs were reverting. I did some testing and it would appear adding `touch-action: pan-y pinch-zoom;` to a parent of the effected children temporarily fixes it. The touch-action will need to removed though before the popover is toggled again otherwise the issue will start up again. It does not seem to be a duration of the animation issue since using a setTimout of even 1 ms seems to work. I also tried a few other attributes but `touch-action` is the only one I've discovered so far that does the trick. Here is my temporary solution:

JS

menu.addEventListener('toggle', (event) => {
    if (event.newState != 'open' && window?.navigator?.userAgent?.toLowerCase()?.includes('version/18.4')) {
        document.body.style.touchAction = "pan-y pinch-zoom"
        setTimeout(() => {
            document.body.style.touchAction = ""
        }, 100);
    }
})

[Tim Nguyen (:ntim)]

This is a regression of bug 281789.

[Tim Nguyen (:ntim)]

Pull request: https://github.com/WebKit/WebKit/pull/44346

[Tim Nguyen (:ntim)]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/52083

[EWS]

Committed 293967@main (0db60d2b4123): <https://commits.webkit.org/293967@main>

Reviewed commits have been landed. Closing PR #44346 and removing active labels.

[EWS]

Committed 289651.457@safari-7621-branch (cd8734580b29): <https://commits.webkit.org/289651.457@safari-7621-branch>

Reviewed commits have been landed. Closing PR #3030 and removing active labels.

[Tim Nguyen (:ntim)]

*** Bug 294160 has been marked as a duplicate of this bug. ***

[Tim Nguyen (:ntim)]

(This bug fix will be available in Safari 18.6)