Capturing beyond 16384px
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 (🤷🏼♂️)