# Fix incomplete full-page screenshots

> Fix cut-off screenshots, repeated sticky headers and missing images. Check scroll containers, lazy loading, frames and long-page capture limits.

Canonical page: https://sitepeel.dev/guides/full-page-screenshot-not-working/

Check which element scrolls and whether the missing content is actually loaded. Nested containers, frames, lazy images and sticky headers can all change what a full-page capture includes.

## Find the element that is really scrolling

Some pages scroll the document itself. Others keep the document fixed and scroll an inner panel, such as an application preview, table or editor. A tool can capture the full outer document while only seeing the visible portion of that inner panel. Look for a second scrollbar and observe which area moves.

An embedded frame is another document with its own scrolling behavior. If the site provides a direct view of the framed content, open that view and capture it separately. In the Firefox discussion linked below, an embedded preview explained why the outer page capture omitted content. Changing screenshot tools alone did not identify that layout boundary.

## Load the content before capturing it

Scroll through the section you need and allow images, fonts and deferred content to settle. Open relevant accordions or tabs deliberately. A capture can only represent the state you prepared; it should not be expected to invent the contents of a closed panel or an unloaded image.

Infinite feeds and virtualized lists require a different approach. An infinite feed has no natural final page, while a virtualized list may remove earlier rows from the document as you move. Choose a finite range, capture sections, or use the application’s own export when available. One extremely tall image is not always a useful record.

## Review sticky headers and animated states

A scrolling capture that combines several views may repeat a fixed header or navigation bar. A section can also appear in a partially animated state if the capture occurs during a reveal. Inspect the first, middle and last portions of the saved image rather than relying only on its thumbnail.

On a page you control, temporarily use a stable capture state: settle animations and keep the header in one intended position. Restore the normal behavior afterward. If you are collecting a reference from another site, consider a viewport or element capture when it communicates the design more clearly than a stitched full-page image.

## Choose a capture that matches the purpose

A viewport capture is useful for evaluating the first impression at a known screen size. An element capture is better for a specific component. A full-page capture is useful when the complete document has a finite, loaded layout. Sitepeel’s Capture tool gives you a way to collect a reference; review its output against the part of the page you intended to save.

For repeatable captures of your own application, browser automation can record a known viewport and page state. Playwright documents page and element screenshot options. Even in an automated workflow, explicitly prepare the content you need rather than treating a generic loading event as proof that every lazy section is ready.

Example: screenshot-preflight.md

```
# Screenshot preflight

- Record the viewport size and browser zoom.
- Identify document, nested-panel or frame scrolling.
- Load the finite range of content you need.
- Open the intended tabs or expanded sections.
- Wait for relevant fonts, images and animations.
- Choose viewport, element or full-page capture.

After saving:
- Check the top, middle and bottom.
- Look for repeated headers and empty image areas.
- Confirm the crop and text remain readable.
- Split very long content into useful sections when needed.
```

## Treat missing media as a separate problem

If the layout is complete but an image or frame is blank, inspect that resource rather than increasing the capture height. DOM-to-canvas renderers and native browser screenshots use different mechanisms, so their handling of cross-origin content can differ. A screenshot limitation does not prove the resource itself is missing from the live page.

Very large output images can also run into browser, renderer or memory constraints. Avoid promising a universal maximum height that applies to every device and tool. A few carefully labeled section captures can be more reliable and easier to review than a single file with an unnoticed gap halfway down.

## Further reading

- [Reddit: an embedded frame causing an incomplete capture](https://www.reddit.com/r/firefox/comments/1p3fskz/full_page_that_requires_a_bit_of_scrolling/)
- [Reddit: missing web fonts and frames in DOM-based screenshots](https://www.reddit.com/r/webdev/comments/1r7yquo/is_it_actually_possible_to_get_good_screenshot_or/)
- [Playwright: full-page and element screenshots](https://playwright.dev/docs/screenshots)

## Related pages

- [Website screenshot](https://sitepeel.dev/website-screenshot/index.md): Capture a website viewport, full page or selected element. Save a clean screenshot with Sitepeel for design reviews and visual references.
- [Capture a design reference](https://sitepeel.dev/guides/capture-website-design-reference/index.md): Choose the right screenshot area and document the details behind a website design. Build references that help your next implementation.
- [Find larger website image sources](https://sitepeel.dev/guides/download-original-website-images/index.md): Find larger image sources on a website by checking srcset, the selected image URL and gallery views. Understand when an original file is not exposed.