Bug 234732

Summary: [:has() pseudo-class] Styles matching non-matching elements on load
Product: WebKit Reporter: Brandon McConnell <brandon>
Component: CSSAssignee: Nobody <webkit-unassigned>
Severity: Critical CC: bramus, koivisto
Priority: P2    
Version: Safari Technology Preview   
Hardware: Mac (Intel)   
OS: macOS 11   
Description Flags
screenshot of has pseudo-class bug none

Description Brandon McConnell 2021-12-28 14:32:44 PST
Created attachment 448057 [details]
screenshot of has pseudo-class bug

Congrats on launching the :has() pseudo-class! Excited by all the possibilities this will open for styling.

One unexpected side effect I'm seeing when testing— it appears that `:has()` sometimes matches for non-matching elements. The inspector doesn't show the styles but they appear on-page. If I comment out the styles in the inspector and then un-comment them, they disappear.

 * Example URL: https://codepen.io/brandonmcconnell/pen/45b67ffa16dc41614efdd140bef1f439
 * Example screenshot attached
 * Example screen recording: https://www.loom.com/share/0cf9c18a99a8421f9957ff04c34f64de

This bug is critical to the use of `:has()` so this should be resolved before the `:has()` pseudo-class is released into the production browser.
Comment 1 Brandon McConnell 2021-12-28 14:38:51 PST
Also check example #'s at this URL (https://codepen.io/brandonmcconnell/pen/a93e58403165e721481e7fc4fe3fb676?editors=1100):
 * Example 6
 * Example 7
 * Example 8

Each shows certain matched squares that should not be matched. If you inspect those blocks in the inspector, you will see they are not actually receiving the styles but show them visually anyway.
Comment 2 Bramus 2021-12-28 15:07:50 PST
On Twitter I saw a demo pass by that showed the same faulty behavior: https://codepen.io/ZoranJambor/pen/GRMyzvy

a:has(span) {
  background: rebeccapurple;
  color: #fff;

Both `<a>` elements get styled, even though the 2nd `<a>` element does not contain a `<span>`.
Comment 3 Antti Koivisto 2022-01-03 06:32:50 PST
Fixed in trunk.

*** This bug has been marked as a duplicate of bug 234531 ***