Scrolling screenshots: what they are and how they work

Every full page capture in a browser is a scrolling screenshot underneath, because the browser will only ever hand over the pixels currently on screen. There is no API that returns the whole document as an image. Everything else is bookkeeping.

That bookkeeping is where tools differ, and it is why two extensions doing "the same thing" produce visibly different output.

The capture loop

What happens between clicking the button and getting an image.

1. 1

   Measure

   Read the document height, the viewport height, the display density, and find which element actually scrolls.

2. 2

   Pin the page

   Neutralise fixed and sticky positioning, fast-forward animations and transitions, and prompt lazy content to load. Every change is recorded so it can be undone exactly.

3. 3

   Scroll and photograph

   Move to the next position, wait for the paint to settle, capture the visible area, and — this is the important part — read back where the page actually landed rather than assuming.

4. 4

   Trim and draw

   Compare the measured position against how far down the image is already filled, trim exactly that overlap from the top of the new capture, and draw it. Bands that are complete get encoded and freed.

5. 5

   Restore

   Undo every change, put the scroll position back, and hand over the finished image.

Why seams appear

Three causes, all of which come from assuming instead of measuring.

Assumed scroll distance

The last step before the bottom of a page almost never moves a full viewport — the page runs out first. A tool that assumes it did will duplicate a strip of content at the join.

Fractional device pixel ratios

At 1.25× or 1.5× zoom, CSS pixels do not map to whole device pixels. Rounding each capture independently accumulates error down the page, showing up as a half-pixel line every few thousand pixels.

A page that moved

If a sticky element re-attaches or an image finishes loading between two captures, the content shifts and the join no longer lines up. Pinning the page before the loop starts prevents it.

Scrolling screenshots on phones

Both mobile platforms have this built in — Android offers "Capture more" after a screenshot, iOS offers "Full Page" in Safari. Neither uses an extension, because Chrome on mobile does not support them.

The desktop equivalent has to be an extension or a desktop application, which is what the rest of this site is about.