counter-reset: list-item - is not fully implemented in Safari WebKit

[glmvc]

What type of issue is this?

Incorrect support data (example: BrowserX says "86" but support was added in "40")

What information was incorrect, unhelpful, or incomplete?

There is a bug entry in WebKit stating "counter-reset: list-item is not fully implemented".

What browsers does this problem apply to, if applicable?

Safari (tested in version 17.4)

What did you expect to see?

A note that list-item for the CSS counter-reset property is not fully implemented in Safari. https://github.com/mdn/browser-compat-data/blob/8a5bcae99ad4145e534f83d93005daf91984ab95/css/properties/counter-reset.json#L47

Did you test this? If so, how?

counter-reset: list-item seems to work for generated ::marker content in Safari, but results in incorrect values for content generated with the counter() function, for example.

This incorrect behavior can be observed in this CodePen example: https://codepen.io/glmvc/pen/dyLBEgP

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

Related site on MDN where the compat-data is used in the browser compatibility table: https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset

Do you have anything more you want to share?

No response

MDN URL

No response

MDN metadata

No response

[myfonj]

Don't have real Safari at hand, but in Playwright's AppleWebKit/605.1.15 and even any Chromium-derived browser on my machine touching list-item by either counter-reset or counter-set does not seem to have any effect at all:

data:text/html,
on LI:
<ol>
 <li>Expected: 1.
 <li>Expected: 2.
 <li style="counter-reset: list-item 10;">Expected: 11.
</ol>

on OL:

<ol style="counter-reset: list-item 10;">
 <li>Expected: 11.
 <li>Expected: 12.
 <li>Expected: 13.
</ol>

(sandbox)

Anything but Firefox still counts 1 - 2 - 3 in both lists:

Correct rendering in Firefox:

[glmvc]

@myfonj Thanks for your insights. There seems to be a bug in Chromium that affects the ::marker content. Check following screenshot:

Safari on macOS seems to generate the ::marker content correctly (although Safari has no "real" support to adapt ::marker content with CSS), but the values of the counter() function for content are different compared to Firefox and Chrome:

Here is a complete example on CodePen showing different scenarios. Please note that I use the latest stable browser versions for testing. As of May 2024.

[myfonj]

@glmvc these are great demonstrations, and man, what Safari does is wild! My even wilder guess is that they are 1) incrementing the counter precisely on the ::marker (instead of on the li) and 2) in their implementation, ::marker comes after ::after. That's hilarious! XD

Anyway, given all the evidence here, I think it is safe to declare support of list-item under counter-* stuff in Safari and even Chrome as incomplete.