Minimal reproduction: Fiddle: https://jsfiddle.net/5n1tb2sd/ HTML: [<span>{<em></em>}</span>] CSS: span:has(em:empty) { color: red } JS: setTimeout(() => { document.querySelector("em").innerText = "no longer :empty so span shouldn't render this as red" }, 1000); The expected behavior is that the curly brackets start out red for the first second, then the text appears (making <em> no longer :empty) and everything should become black. This works in Chrome and Firefox. It is broken in Safari Version 18.1 (20619.2.8.11.10) which is the latest I can test through BrowserStack, it keeps the curly brackets and the added text red until I manage to force a repaint. Sometimes, merely opening dev tools causes it to repaint. Other times, I have to inspect the element and begin assigning it some CSS property or toggle an existing CSS property to force a repaint. To be clear, the red style is not applied to the <span> in dev tools, but it has been incorrectly painted red until the next repaint can be forced.