htmlToImage.toPng Freezes in Firefox with Heavy DOM – Works Fine till Chrome 137 and Edge

[ashutosh-aneja]

Expected Behavior
screenshot = await htmlToImage.toPng(element) should generate a screenshot smoothly across all major browsers including Firefox, Chrome, and Edge.

Current Behavior
On Firefox, when trying to generate a screenshot of a heavy DOM element, the process freezes the browser tab (sometimes indefinitely).

The same code works smoothly on Chrome and Edge.

Screenshot is eventually generated, but user experience is very poor due to the hanging UI.

Possible Solution
Look into performance optimizations when rendering large DOM trees in Firefox.

Consider offloading processing to a Web Worker or using incremental rendering (if possible).

A flag to batch/render in chunks, or break the DOM tree into manageable parts, might help.

Provide guidance or best practices for usage with large DOM elements in Firefox.

Steps To Reproduce
Use htmlToImage.toPng or htmlToImage.toJpeg on a large DOM element.

Run the code on Firefox (latest version).

Observe that the browser hangs during screenshot generation.

Try same in Chrome or Edge – works without any noticeable lag.

htmlToImage.toJpeg(element, { pixelRatio: 1, quality: 0.9 })
.then(dataUrl => {
observer.next({ homeScreenControl, dataUrl });
observer.complete();
});

No specific error — the browser tab simply becomes unresponsive until the image is generated.

I'm using this in a corporate production environment for generating user-facing screenshots.

For our customer base, Firefox is the default browser, so this issue is critical.

We’ve tested multiple options and configurations, but none solve the freezing behavior in Firefox.

Happy to share a simplified HTML structure if needed to reproduce.
Working on angular web app.

Your Environment
html-to-image: 1.11.11 (latest)

OS: Windows 10

Browser: Firefox 126.0 (Issue happens in all recent versions)

Working Fine On: Chrome 125.0, Edge 125.0

[biiibooo]

👋 @ashutosh-aneja

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[erik-grubbs]

Hey @ashutosh-aneja, just checking if you were able to find any improvements and also to corroborate that I'm having the same issue, but also in Chrome 138 and Edge 138. Opera still works as expected.

[ashutosh-aneja]

Yes, Chrome 138 started failing, so I fork this library HtmlToImage directly in my project instead of using this as npm package.
I have seen improvements in chrome by this way.

Firefox is still unresponsive until the image is generated.
This library code is not much compatible with Firefox rendering engine.
But still I saw some improvements after keeping library code directly in my project.

[foolip]

The root cause of this is probably the same as #542, a lot of custom properties, which are included in getComputedStyle() and getting copied for many elements. I'll comment there with a possible workaround.