:has() rare scenario works for Chrome not FF
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
People
(Reporter: c.slaw, Unassigned)
Details
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:140.0) Gecko/20100101 Firefox/140.0
Steps to reproduce:
First i created html5 html code for a page - to simplify the body of it it is like this:
<body class="no-js"><div>
<header></header>
<div><div class="roboty-wykonczeniowe-slider">
<div>
<div>
</div>
</div>
</div>
</div>
... Some siblings here
<noscript>
<input type="radio" id="" name="slider-auto-slide-turned-on-off" value="on" checked>
<input type="radio" name="slider-auto-slide-turned-on-off" value="off">
<input type="radio" id="no-js-slide-1" name="no-js-slide" value="1">
<input type="radio" id="no-js-slide-2" name="no-js-slide" value="2">
<input type="radio" id="no-js-slide-3" name="no-js-slide" value="3">
<input type="radio" id="no-js-slide-4" name="no-js-slide" value="4">
</noscript>
</div>
</body>
then made a css like with the relevant css rules like the following:
Why for the following css rule:
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 well in Chrome as expected (so average person naturally may think it should) - noscript is visible, js disabled, controls are visible.
Sophisticated use case of :has() but it sort of "has right" to happen.
Actual results:
All described in the first part
Expected results:
All described in the first part
Excuse me i may be wrong that it works in Chrome. I've just noticed it. Because of load of different factors might have tricked my brain to interprete it works for Chrome but it doesn't. By this it implies this rare :has() use works as intended, but i still feel such a rule should work as i imagined.
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.
|
||
Updated•5 months ago
|
|
||
Comment 3•5 months ago
|
||
(In reply to Slawek from comment #2)
I WAS WRONG CREATING THIS REPORT PLEASE REMOVE IT:
Done. Thanks. :)
Description
•