Strange counting in Safari

First: don’t tell me about webkit-reporting. I just get a 502 from there! Ok, what’s the problem? I made an example telling it all:

<html>
	<head>
		<style>
			.ext { display: none; color: cyan; }
			body {
				max-inline-size: calc(100vi - 12px);
				&:not(:has(:target)), &:has(p.dft:target) {
					#ext { display: none; }
					#dft { display: block; }
				}
				&:has(p.ext:target) {
					#ext { display: block; }
					#dft { display: none; }
				}
				&.ext li { display: none; }
				&:has(.ext:target) {
					& li.ext { display: revert; }
				}
			}
			header > p > a::before { color: orange; content: "click me >>> "; }
			ul { display: flex; }
			li { margin: 1ex; list-style-type: none; inline-size: max-content; }
			.yes li::before {
				font-size: 70%; color: yellow; background-color: blue;
				content: "(" counters(total, ":") ")";
			}
			ul.nGrp {
				display: inline flex;
				counter-reset: nameIndex;
				& li::after {
					display: inline-block;
					counter-increment: nameIndex;
					font-size: 75%; color: red; vertical-align: sub;
					content: "(" counter(nameIndex) ")";
				}
			}
			header {
				inline-size: 100%;
				font-size: 2rem; text-align: center;
			}
			article {
				counter-reset: total;
				padding: 1ex; margin: 1em;
				&::after {
					font-size: 3em; color: purple;
					content: "— [" counter(total) "] —";
				}
				li { counter-increment: total; }
				outline: 1ex groove purple;
			}
		</style>
		<title>Strange Safari-Count</title>
	</head>
	<body lang="de">
		<header>
			<hgroup><h1>Strange counting without <code>:before</code></h1><p>different from FireFox!</p></hgroup>
			<p id="dft" class="dft"><a href="#ext">More?</a></p>
			<p id="ext" class="ext"><a href="#dft">Less!</a></p>
			<p><code>:before</code> doesn’t inherit parent’s display:none? (same in FireFox)</p>
		</header>
		<article>
			<ul>
				<li class="dft"><p>A1</p></li>
				<li><ul class="nGrp"><li class="dft"><p>A1</p></li><li class="dft"><p>A1</p></li></ul></li>
				<li class="dft"><p>A3</p></li><li class="dft"><p>A4</p></li>
				<li><ul class="nGrp"><li class="dft"><p>A5</p></li><li class="ext"><p>A5</p></li></ul>
				</li>
				<li><ul class="nGrp"><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li></ul></li>
			</ul>
			<ul>
				<li><ul class="nGrp"><li class="ext"><p>B1</p></li><li class="dft"><p>B1</p></li></ul></li>
				<li class="dft"><p>B2</p></li>
				<li><ul class="nGrp"><li class="dft"><p>B3</p></li><li class="ext"><p>B3</p></li></ul></li>
			</ul>
		</article>
		<article class="yes">
			<ul>
				<li class="dft"><p>A1</p></li>
				<li><ul class="nGrp"><li class="dft"><p>A1</p></li><li class="dft"><p>A1</p></li></ul></li>
				<li class="dft"><p>A3</p></li><li class="dft"><p>A4</p></li>
				<li><ul class="nGrp"><li class="dft"><p>A5</p></li><li class="ext"><p>A5</p></li></ul>
				</li>
				<li><ul class="nGrp"><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li><li class="dft"><p>A6</p></li></ul></li>
			</ul>
			<ul>
				<li><ul class="nGrp"><li class="ext"><p>B1</p></li><li class="dft"><p>B1</p></li></ul></li>
				<li class="dft"><p>B2</p></li>
				<li><ul class="nGrp"><li class="dft"><p>B3</p></li><li class="ext"><p>B3</p></li></ul></li>
			</ul>
		</article>
	</body>
</html>

At least have an eye on the total count at the end of the (identical) articles! Before and after clicking the teaser.

Just a shorter version of my(?) main-problem: https://jsfiddle.net/Rolf_b/axjvuo5y/

Thank you for the report. We are tracking this via https://bugs.webkit.org/show_bug.cgi?id=268597

Nice “Update” (of Safari). Now counters don’t work any more. And: not only counters! Just have a look. Same code. Inspector in Safari:

Inspector in Firefox:

Looks like Safari doesn’t like counter/counters any more. Guess what will happen if you insert "li::after { content: "tERROR"; } just after the opening brache of name-group! BTW: both browsers don’t count any more since they got the last two (Safari + Firefox = 4) updates.

Strange counting in Safari
 
 
Q