Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS counters are not correctly rendered

See original GitHub issue

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 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

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

roberttoltoncommented, Sep 20, 2022

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

Mokkappscommented, Sep 15, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS counter not incrementing in shadow DOM - Stack Overflow
I have the following setup where a CSS counter works for slotted content but not in the shadow DOM. import { LitElement, css,...
Read more >
The counters() CSS content function is not parsed correctly #705
Hi,. I have found an issue with using content: counters. It seems that when using the counters syntax the $counter_id holds the "("...
Read more >
Using CSS counters - CSS: Cascading Style Sheets | MDN
CSS counters let you adjust the appearance of content based on its location ... The counter's name must not be none , inherit...
Read more >
A Guide to CSS counter |
A complete guide to CSS counter. How it works and how you can apply automatic incrementation to any HTML element just like ordered...
Read more >
CSS Counter Styles Level 3 - W3C
CSS is a language for describing the rendering of structured documents ... <counter-style-name> is a <custom-ident> that is not an ASCII ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found