Useful Drawer

Why the Header Repeats Down Your Screenshot

The menu bar that follows you down the page turns up once per screen in a stitched screenshot. Here is the mechanism, how to recognize it, and what stops it.

·5 min read

You capture a long page and the navigation bar is in the picture six times, evenly spaced, marching down the image like a flip book. The page does not look like that in the browser. It looks like that in the screenshot.

This is the most common thing that goes wrong with a full-page capture, and the cause is mechanical rather than mysterious.

What is actually happening

A full-page screenshot is not one exposure. There is no way for a browser extension to photograph a page that is taller than the window, so it does the only thing available: scroll down one screen, take a picture, scroll again, take another, and stitch the pictures together into one tall image.

A sticky header is designed to stay at the top of the window while you scroll. That is its entire job, and it does it correctly during a capture too. So it is at the top of screen one, the top of screen two, the top of screen three, and so on.

Stack those screens and the header appears once per screen, all the way down.

Stitched as capturedHeader hidden after frame one×4×1

How to recognize it

The repeats are evenly spaced, and the gap between them is exactly the height of your browser window. If the repeated element is at an irregular interval, or appears partway down and then continues, something else is going on — usually an element that loaded late rather than one that was there from the start.

Footers that stick to the bottom of the window do the same thing in reverse, and are easier to miss because a repeated bar at the foot of each screen reads as page furniture.

What you can do about it

  1. Make the window taller. Fewer screens means fewer repeats. It does not fix the problem but it reduces it, and on a page that is only slightly too long it can remove it entirely.
  2. Hide the header before you capture. Right-click the bar, choose Inspect, and delete the element. It is gone until you reload. This works everywhere and takes about ten seconds once you have done it twice.
  3. Use the page’s own print view. Ctrl or Cmd and P, then Save as PDF. Print stylesheets almost always drop sticky navigation, because nobody wants it on paper either.
  4. Crop the repeats out afterwards. Tedious on a tall image, but it is the fallback when the header cannot be removed.

What PageStill does

It hides elements that stay put while you scroll after the first screen has been captured, then puts them back when the capture finishes. The header appears once, at the top, where it belongs, and nowhere else in the image.

The same pass catches anything else pinned to the window — consent banners, floating buttons, support bubbles. Two of those have their own quirks worth knowing about, and they have their own pages.

The page is left exactly as it was afterwards, including where you were scrolled to.

Something out of date or wrong here? Device specs and interface details shift with every release. Tell me and I'll fix it.

Related reading