Bug 288923 – Slow page loading with irrelevant :has() selector

• Status: NEW
• Component: CSS

[Jeff Johnson]

Created attachment 474389 [details]
Example style sheet to demonstrate the bug

Safari Technology Preview 214 (Safari 18.4, WebKit 20622.1.2.111.3) and Safari 18.3 (20620.2.4.11.5) on macOS 15.3.1

Steps to reproduce:
1) Open Safari Advanced Settings
2) Select the attached style sheet in the Style sheet popup
3) Open https://news.ycombinator.com/item?id=43208973

The style sheet contains the following CSS:

foobar div:has(img) button {
    background-color: red !important;
    color: red !important;
}

Of course the page has no foobar element, so the :has() selector should not be evaluated, but it is evaluated and slows down the page loading considerably.

I think this bug is related to or the same as https://bugs.webkit.org/show_bug.cgi?id=283222

Also attached are screenshots of the web inspector Timeline: "no-style" is without using the style sheet, while "style1" and "style2" are two runs using the style sheet. You can see that the existence of the style sheet delays the first paint by several seconds.

[Jeff Johnson]

Created attachment 474390 [details]
Screenshot of Timeline with no style sheet

[Jeff Johnson]

Created attachment 474391 [details]
Timeline with style sheet, first run

[Jeff Johnson]

Created attachment 474392 [details]
Timeline with style sheet, second run

[Alexey Proskuryakov]

Thank you for the report. STP 214 includes the fix for bug 283222, so this must be a separate issue.

[Radar WebKit Bug Importer]

<rdar://problem/146562938>