CSS counters are not correctly rendered

Expected Behavior

I use CSS counters:

.line-numbers {
  code {
    counter-reset: step;
    counter-increment: step 0;
  }

  code .line::before {
    content: counter(step);
    counter-increment: step;
    width: v-bind(lineNumbersWidthPx);
    margin-right: v-bind(lineNumbersMarginRightPx);
    display: inline-block;
    text-align: right;
    color: $custom;
  }
}

and they are shown correctly before downloading the image:

Current Behavior

Inside the generated image, the CSS counter value is 0 for every line:

Possible Solution

Steps To Reproduce

See https://stackblitz.com/edit/js-inyakv?file=index.js and click the button

Error Message & Stack Trace

<!-- Provide a log message if relevant -->

Additional Context

Your Environment

• html-to-image: 1.10.8
• OS: macOS Montery 12.5.1
• Browser: Chrome Version 104.0.5112.101 (Official Build) (x86_64)

Additional info: It works fine in Firefox 104.0.2

[roberttolton]

I’m also having this issue, got my CSS counters working nicely and then… 0 0 0 0 in the rendered image!

[Mokkapps]

Any updates? Can someone point me in the right direction where I could fix this on my own in this project?