Missing images when batch printing PDFs

[ccapndave]

Hey! Thanks for such an amazing library :)

We've recently noticed that sometimes our PDF generation are randomly missing some background images. It only seems to happens if we are batch generating a bunch of PDFs together, and the missing images are different each time

I get the impression that in this case the background images have not fully loaded when then PDF is printed.

We are using {:html: html} to define the input like so:

ChromicPDF.print_to_pdf({:html, html},
  print_to_pdf: %{printBackground: true, marginTop: 0, marginBottom: 0, marginLeft: 0, marginRight: 0}
)

I did read a comment on another issue that injecting html from a string can be a bit flaky but unfortunately we don't have a choice for our use case.

Any advice on how to debug this would be gratefully received!

[andreasknoepfle]

Hi @ccapndave, how do you reference the images? Are they coming from local or remote network?
Is the image background maybe set by css that is also loaded from external?

In our experience it is the safest to inline as much as you can with base64 data urls, since then chrome doesn't need extra requests at all and the content is already there when rendering the page ( https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data
https://css-tricks.com/data-uris/ )

Is that an option for you?

[ccapndave]

Thanks for the quick response!

Everything (the CSS and the background images inside the CSS) are loaded using an absolute URL, but actually DNS should resolve it back to the same server that is running Chromic. However, everything sits behind a load balancer so maybe there is a brief delay.

Using base64 urls could be an option, but it would involve rewriting a lot of templates.

As a temporary workaround is there a way to add a delay of 1 second before the PDF is printed? I expect this would fix the problem until we can do it properly.

[andreasknoepfle]

You can evaluate JS before loading:
https://hexdocs.pm/chromic_pdf/ChromicPDF.html#print_to_pdf/2-dynamic-content

Maybe chrome does not wait on background images, since they are not considered to be part of the content for the DOMContentLoaded event (not sure).

Apparently one can wait on images like so:
https://stackoverflow.com/questions/22788782/wait-for-background-images-in-css-to-be-fully-loaded

I also found a gist using this technique for selenium. Maybe this can serve as an inspiration for you:
https://gist.github.com/munro/7f81bd1657499866f7c2

Probably better to wait for the images instead of a flat 1 second delay, to be sure they are always there, even under high load.

[ccapndave]

Thanks very much for the advice! I'll try these out and let you know how I get on.