Blog · Troubleshooting
Why Full-Page Screenshots Break (Sticky Headers, Parallax, Blank Sections) and How to Fix Them
You take a full-page screenshot of a beautiful site and get back a mess: the header repeated six times, a section missing, a strange gap halfway down. It's not you. Modern websites are built for scrolling, and most capture tools aren't. Here's what's going on.
First, how full-page screenshots are made
There are two approaches, and each has its own failure modes:
- Scroll and stitch: the tool scrolls the page one screen at a time, captures each screen, and glues them together. Most extensions work this way.
- Render tall: the tool pretends the window is as tall as the whole page and captures it in one shot. Chrome's DevTools command works this way.
Problem 1: the header repeats down the page
Cause: a sticky or fixed header stays at the top of the screen while you scroll. A scroll-and-stitch tool captures it on every screen, so it appears in every slice.
Manual fix: after the first screen, hide the header with your browser's inspector (right-click it, choose Inspect, and set it to display: none), then capture. Fiddly, and you have to do it for every site.
Problem 2: blank or half-faded sections
Cause: many sites fade or slide content in when it scrolls into view. A render-tall tool never scrolls, so that content never gets triggered and stays invisible. A scroll-and-stitch tool may catch it halfway through the animation.
Manual fix: scroll slowly to the bottom of the page and back to the top before capturing, so everything has animated in.
Problem 3: gaps and jumps from parallax
Cause: parallax backgrounds move at a different speed from the rest of the page. When slices are stitched together, the background doesn't line up, leaving seams, repeated strips or gaps.
Manual fix: there isn't a good one. You can try turning off animations in your operating system's accessibility settings (many sites respect "reduce motion"), but plenty of sites ignore it.
Problem 4: missing images
Cause: to load faster, sites often wait to load images until you scroll near them. If the capture happens before they load, you get empty boxes.
Manual fix: scroll through the whole page first and wait a moment for images to load.
Problem 5: a giant stretched hero
Cause: heroes are often set to "100% of the screen height". When a render-tall tool pretends the screen is thousands of pixels tall, the hero grows to match.
Manual fix: use a scroll-and-stitch tool instead for that site.
Problem 6: cookie banners and chat bubbles everywhere
Cause: they're fixed to the screen, so like sticky headers they can appear in every slice.
Manual fix: accept or dismiss the cookie banner and close any chat widgets before you capture.
The one-click fix
We built Pretty Sites because we kept hitting every one of these. When you click Snap full page, it prepares the page first:
- It glides through the page once so lazy images load and scroll animations finish.
- It shows sticky and fixed elements once, then hides them for the rest of the capture.
- It holds parallax, sliders, marquees and playing videos still while it captures.
- It captures at your real screen size, so heroes stay the right height.
Then you get one clean image as a PNG or JPG, or copied to your clipboard. Full-page screenshots are free and unlimited. Add it to Chrome.
You'll still want to close cookie banners yourself first, since only you can choose accept or decline.