Open
Description
After upgrading to 1.11.12 we observed that images were no longer created when the browser tab was in the background.
We believe it is caused by the commit 51fb98f which uses requestAnimationFrame which is paused for inactive tabs.
Our use case is that we use html-to-image to create images for web notifications. It defers showing notifications as a whole.
Expected Behavior
Creating images should work regardless of whether the tab is active or not.
Current Behavior
Images are generated as soon as the browser tab is activated but not before.
Possible Solution
We have downgraded to 1.11.11. Our suggested fix is to switch to a different API, other than requestAnimationFrame.
Steps To Reproduce
- Save this HTML file on your drive and open it in a browser:
<!DOCTYPE html>
<meta charset="utf8">
<div id="node" style="background: blue; color: #fff; width: 50px; height: 50px;">Test Node</div>
<script type="module">
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'https://esm.sh/[email protected]';
//import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'https://esm.sh/[email protected]';
document.querySelector("button").onclick = function() {
console.log(`Button click at ${new Date().toISOString()}`);
setTimeout(() => {
console.log(`Calling toPng at ${new Date().toISOString()}`);
toPng(document.getElementById('node')).then((dataUrl) => console.log(`Image ready at ${new Date().toISOString()}`, dataUrl));
}, 5000);
}
</script>
<button>Trigger timeout</button>- Click on "trigger" and make the tab inactive by e.g. switching to a different one
- Wait 5 seconds
- See how the console shows "Image ready at" at the time of switching and not at the time of when "Calling toPng" was printed.
Additional Context
Your Environment
- html-to-image: 1.11.13
- OS: Windows 11 23 H2
- Browser: ungoogled-chromium Version 126.0.6478.114 (Official Build, ungoogled-chromium) (64-bit)