Bug 234732 - [:has() pseudo-class] Styles matching non-matching elements on load
Summary: [:has() pseudo-class] Styles matching non-matching elements on load
Status: RESOLVED DUPLICATE of bug 234531
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Intel) macOS 11
: P2 Critical
Assignee: Nobody
Depends on:
Reported: 2021-12-28 14:32 PST by Brandon McConnell
Modified: 2022-01-03 06:32 PST (History)
2 users (show)

See Also:

screenshot of has pseudo-class bug (205.36 KB, image/png)
2021-12-28 14:32 PST, Brandon McConnell
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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 ***