Differences between implementation of :has between FF and Chrome.
FF bug (?) (my own tests), Chrome works as expected, was also gemini ai discussed.:
Why for the following css rule (new FF):
header:has(~ noscript) ~ * div[class*="-slider"] {width: calc(var(--number-of-slides) * 100%);}
the --number-of-slides is defined and visible:
header:has(~ noscript) ~ * div[class*="-slider"] {--number-of-slides: 1}
but this one isn't at all:
header:has(~ noscript:has([value="1"])) ~ * div[class*="-slider"] {--number-of-slides: 1}
And all remembering that in the noscript there is direct descendant having value="1"
As mentioned it works as expected (so average person naturally may think it sould) well for Chrome - noscript is visible, js disabled, controls are visible. Sophisticated use case of :has() but it sort of "has right" to happen.
All Replies (6)
Do you have a minified testcase of this issue? Then it's better to report it on https://bugzilla.mozilla.org. Thanks!
Thx, sure. Bugzilla will be better for that. testcase... hope one day i know what it is ... :) After i efficiently report it, good to remove the topic probably.
It is not well reported as i have no time to go deeply how bugzilla works: https://bugzilla.mozilla.org/show_bug.cgi?id=2000585
Please remove this post here.
Excuse me i may be wrong in that it works for chrome - it seemed to do. Need time to verify.
Reposting what i wrote in bugzilla (please remove this entire topic)
I WAS WRONG CREATING THIS REPORT PLEASE REMOVE IT: Gemini told me (the reason it gave is what i suppose is the problem): the "CSS rule div:has(span:has(u)) is not allowed according to the current CSS specification. The has() pseudo-class has a specific restriction: :has() cannot be nested within another :has().
This restriction is in place to prevent performance issues and potential "cyclic querying" within the browser's rendering engine, which could make style calculations infinitely complex"
As i am new to :has() it needs eperience to come up with proper css rule at times so based on the original supposed-to-be "bug" the following: header:has(~ noscript:has([value="1"])) ~ * div[class*="-slider"] can be replaced by: header:has(~ noscript > [value="1"]) ~ * div[class*="-slider"] {--number-of-slides: 1; width: 50%;} and works as expected everywhere.
Hi Sławomir,
Thank you for posting an update here! I'll lock the thread then.