Getting blank white image when taking screenshot in Firefox. about modern-screenshot

[qq15725]

I need a minimal reproduction to debug your issue, thanks!

Playground for https://codesandbox.io

Playground for https://codepen.io

Playground for https://play.vuejs.org

[mayurborkar27]

@qq15725 we are having d3 chart as svg in our project and trying to take screenshot of that svg, in google chrome it is taking proper screenshot of that svg but in firefox it is getting as blank white image.

[mtxue97]

@qq15725 we are having d3 chart as svg in our project and trying to take screenshot of that svg, in google chrome it is taking proper screenshot of that svg but in firefox it is getting as blank white image.

Is the image dataURL generated in Firefox very large and contains many redundant styles?

[henrikvilhelmberglund]

I saw this with some icons: playground

[PikPakPik]

@qq15725 we are having d3 chart as svg in our project and trying to take screenshot of that svg, in google chrome it is taking proper screenshot of that svg but in firefox it is getting as blank white image.

Is the image dataURL generated in Firefox very large and contains many redundant styles?

Yes very large and contains many redundant styles and same problem here with d3 chart, no solution since 1 year ?

[crazy4chrissi]

We had the same problem. The root cause were global css variables with embedded graphics that summed up to 8MB of variables at the global scope. It even caused modern-screenshot to crash (NS_ERROR_OUT_OF_MEMORY) in Firefox. Reducing the CSS size to ~ 50KB caused it to produce blank images in Firefox.

We solved this by moving the css variables to the scope of the element using it. After that, modern-screenshot did not have any issues producing the image anymore.

Before:

:root {
  --icon-foo: url(data:image/png;base64,..............................);
}

after:

my-icon {
  --icon-foo: url(data:image/png;base64,..............................);
}

In our case my-icon is a custom element with a shadow dom, thus the variable needs to be declared at the scope of the custom element (or a ::part). If you are not using shadow dom, you can use css classes as selectors or whatever. Just make sure the dom elements in the tree that modern-screenshot should take images of do not have too many huge variables in their scope.

Of course this workaround does not help if the screenshot should include the images that cause the huge css.