I'm screenshotting programmatically a bunch of very very long pages, and I noticed that some captures were coming back full of white patches. For days I tried to find the source of the problem. Do images have enough time to load? Is there any CSS property in the page that is causing a misrender? What about animations?

It turns out chromium has a hard time processing images over 16384px, so you need to capture-scroll-repeat and stitch the result.

This approach brings other fun problems to the table:

  • Capturing sticky headers and footers (solved!)
  • Fixed sidebar repetition (no clue how to work around this problem sustainably)
  • Animations loops in the seams of captures (🤷🏼‍♂️)