Why Chrome Full Page Screenshots Repeat Parts
Chrome’s full-page screenshot feature sometimes repeats sections of a webpage because the browser stitches together multiple screen captures and misjudges where fixed elements, lazy-loaded images, or dynamic content shift between frames. This creates duplicated blocks in the final image. The problem is not a flaw in your computer—it’s how Chrome captures long pages that extend beyond a single viewport.
How Chrome Captures Full-Page Screenshots
When you use the built-in “Capture full size screenshot� option (available in Chrome’s developer tools or via certain extensions), the browser does not take one giant photo. Instead, it scrolls the page in increments, takes a screenshot of each visible portion, and then aligns those images vertically. The alignment relies on the page’s layout staying perfectly still during the capture process. Any element that moves, loads, or changes size between scroll steps can cause the stitching algorithm to overlap or skip content, producing repeating sections.
The most common trigger is a fixed or sticky header. If a site keeps a navigation bar at the top of the viewport, that header appears in every incremental capture. Chrome’s stitching logic usually tries to remove duplicates, but when the header’s height changes (e.g., it shrinks on scroll) or when the page uses CSS transforms, the removal fails and the header appears multiple times in the final image.
Why Fixed Elements Cause Duplication
Fixed elements are positioned relative to the browser window, not the page. When Chrome scrolls down to capture the next section, the fixed header stays in the same screen position, so it is captured again. Chrome’s algorithm attempts to detect and strip these repeated regions, but it relies on pixel comparison. If the header contains dynamic content—like a changing clock, a rotating banner, or a user-specific greeting—the pixels differ slightly, and Chrome treats them as distinct content, leaving both copies in the output.
Another culprit is position: sticky elements. Unlike fixed elements, sticky elements scroll naturally until they hit a threshold, then become fixed. During a full-page capture, the sticky element may be in different states (scrolling vs. fixed) in different frames, causing the stitching to misalign and duplicate the element.
Lazy-Loading and Dynamic Content
Many modern websites use lazy loading: images and iframes only load when they scroll into the viewport. When Chrome captures a full page, it scrolls quickly, and some images may not have loaded yet when their section is captured. The browser then captures a blank or placeholder area. Later, when the image loads, the page’s height changes, and the stitching algorithm gets confused—it may repeat a previously captured section to fill the gap, or it may insert the newly loaded image twice if the scroll position shifted.
Dynamic content that changes over time—such as animated counters, live chat widgets, or auto-refreshing feeds—also breaks the stitching. Each capture frame sees a different state of the element, and the algorithm cannot find matching pixels to align, leading to overlapping or repeated blocks.
Common Scenarios and Examples
You are most likely to see repeated sections on:
- News articles with sticky share bars and infinite-scroll comment sections.
- E-commerce product pages with sticky “Add to Cart� buttons and lazy-loaded product images.
- Social media feeds that continuously load new posts as you scroll.
- Long documentation pages with fixed side navigation and code blocks that use syntax highlighting (which may render differently after a moment).
For example, a Wikipedia article with a sticky table of contents often shows the table of contents twice in a full-page screenshot—once at the top and again halfway down, where the algorithm failed to remove the duplicate.
How to Avoid or Fix the Problem
There is no built-in Chrome setting to disable full-page screenshot stitching. However, you can work around the issue with these methods:
- Use a dedicated screenshot extension that captures the page by resizing the browser window to the full page height instead of scrolling. This method avoids stitching entirely and usually produces clean results.
- Disable lazy loading before capturing. In Chrome’s developer tools (F12), open the Network tab, check “Disable cache,� and reload the page. This forces all images to load immediately. Some extensions also let you force-load all images.
- Scroll slowly and manually if you are using a third-party tool that stitches. Pausing at each section gives the page time to settle.
- Hide fixed elements temporarily using the developer tools. Right-click the fixed header, choose “Inspect,� and add
display: none;to its CSS. Then capture the page. - Use the print-to-PDF method. In Chrome, press Ctrl+P (or Cmd+P), choose “Save as PDF,� and set the paper size to a very long custom height. This renders the entire page as a single PDF without scrolling, and you can convert the PDF to an image if needed.
Alternative Methods for Long Screenshots
If you frequently need full-page captures, consider these alternatives:
- Firefox’s built-in screenshot tool has a “Save full page� option that uses a different rendering method and often handles fixed elements better.
- Edge’s web capture also offers full-page screenshots and uses a similar stitching approach, but its algorithm may differ in behavior.
- Third-party tools like Snagit or ShareX use browser automation to resize the viewport, which avoids stitching artifacts.
- Command-line tools like Puppeteer can take full-page screenshots by setting the viewport height to the full page height, producing a single capture.
Frequently Asked Questions
Why does my full-page screenshot have the same section twice?
This happens because Chrome captures the page in segments and stitches them together. If a fixed element (like a header) appears in multiple segments, and the stitching algorithm fails to detect it as identical, it leaves all copies in the final image.
Does this happen on all websites?
No. Websites with simple static layouts and no fixed elements usually capture cleanly. The problem is more common on modern sites with sticky headers, lazy-loaded images, or dynamic content.
Can I prevent it by disabling JavaScript?
Sometimes. Disabling JavaScript removes many dynamic elements and fixed headers, which can eliminate the duplication. However, some sites rely on JavaScript to load content, so the page may appear incomplete.
Is there a way to take a full-page screenshot without scrolling?
Yes. Using the print-to-PDF method or a browser extension that resizes the viewport to the full page height avoids scrolling entirely. This is the most reliable way to get a clean full-page image.
Why do some extensions produce perfect screenshots while Chrome’s built-in tool doesn’t?
Chrome’s built-in tool uses a scrolling and stitching approach, which is prone to errors. Many extensions use the same method, but some use the viewport-resizing technique, which is more accurate because it captures the entire page in one shot.
Will this be fixed in a future Chrome update?
It is possible, but the issue is inherent to the stitching approach. Chrome may improve its duplicate detection, but as long as it uses scrolling, there will always be edge cases where dynamic content causes repeats.
Related
Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.