BrowserWorks
Elements with `:has(...)` in CSS are not updated when the page changes
What happened?
If I have some CSS that uses :has(...), then the element won't be properly updated if the layout of elements within :has(...) is changed via JS.
Tested on:
- Waterfox: G6.0.7 (64-bit) - Broken
- Google Chrome: Version 120.0.6099.225 (Official Build) (64-bit) - Works
- Firefox: 121.0.1 (64-bit) - Works
MCVE (HTML document) — in Waterfox, the background stays red as the contents change to B, whereas in Chrome & FF, it toggles between red & lime:
<html>
<head>
<style>
.root:has(.a) {
background-color: red;
}
.root:has(.b) {
background-color: lime;
}
</style>
<script>
function toggleAB()
{
const roots = document.querySelectorAll('.root');
for(const root of roots)
{
const p = document.createElement('p');
if(root.querySelector('.a'))
{
p.classList.add('b');
p.textContent = 'B (expecting LIME background)';
}
else
{
p.classList.add('a');
p.textContent = 'A (expecting RED background)';
}
root.innerHTML = '';
root.appendChild(p);
}
}
</script>
</head>
<body>
<div class="root">
<p class="a">A (expecting RED background)</p>
</div>
<div class="root">
<p class="b">B (expecting LIME background)</p>
</div>
<button type="button" onclick="toggleAB()">Toggle A/B</button>
</body>
</html>
Reproducible?
- [X] I have checked that this issue cannot be reproduced on Mozilla Firefox.
Version
G6
What platform are you seeing the problem on?
Windows
Relevant log output
No response
I don't use Waterfox, I use Firefox 115 ESR, but since the current version of Waterfox is based on Firefox 115 ESR like already mentioned in this change log : https://www.waterfox.net/docs/releases/G6.0b1/ :
Waterfox is now based on ESR115.
I think I know what causes your issue, the issue occurs because Firefox 115 ESR, on which Waterfox is based on, doesn't has native :has() support enabled by default because it's still in experimental phase, like already mentioned here https://caniuse.com/css-has :
Supported in Firefox behind the
layout.css.has-selector.enabledflag, which is enabled by default since 119 (only Nightly)
You can enable this flag manually in about:config but keep in mind it's still in experimental status in Firefox 115 ESR, which means it causes glitches / fails sometimes.
The full support for native :has() in Firefox is enabled and fully implemented since Firefox 121, like already stated in this change log : https://www.mozilla.org/en-US/firefox/121.0/releasenotes/
The :has() selector is now supported. This allows authors to match an element that has, or "anchors", at least one element matching its relative selector.
darkuranium : 1. MCVE (HTML document) — in Waterfox, the background stays red as the contents change to B, whereas in Chrome & FF, it toggles between red & lime:
Most likely like explained above, you don't have the :has() support flag enabled in Waterfox,
but if you have the flag already enabled, then read issues caused by experimental :has() flag :
- https://bugzilla.mozilla.org/show_bug.cgi?id=418039
- https://github.com/WaterfoxCo/Waterfox/issues/2919
- https://github.com/uBlockOrigin/uBlock-issues/issues/2480#issuecomment-1869134077 + later comments
(Unless I'm wrong and Waterfox handles :has() a different way than Firefox or it's enabled by default in Waterfox)
I think I know what causes your issue, the issue occurs because Firefox 115 ESR, on which Waterfox is based on, doesn't has native :has() support enabled by default because it's still in experimental phase, like already mentioned here https://caniuse.com/css-has :
~~Looks like it is enabled in Waterfox by default. Which makes sense, considering :has() seems to work correctly if page is refreshed (not really visible in my MCVE, but if I modified it to have both A and B at the same time to select the "initial" background, it'd work while refreshed).~~ (Update: I've updated the MCVE to show both A & B at the same time.)
It's just dynamic changes that are broken, in that :has(...) seems to be ignored in whatever system observes for DOM changes to apply CSS.
darkuranium : Looks like it is enabled in Waterfox by default.
I don't know, but it might be possible, like I already mentioned :
garry-ut99 : (Unless I'm wrong and Waterfox handles
:has()a different way than Firefox or it's enabled by default in Waterfox)
If the flag is enabled by default in Waterfox (or you enabled it manually), then maybe your issue is caused by a fact the the :has() flag is still experimental in Firefox 115 ESR and has several issues, you can read about the issues in links I provided at the bottom of my previous comment (unless the issue you reported is a new thing not mentioned anywhere else or is a separate issue caused by something else).