Skip to content

CaptureGuide

8 min read

Why a full-page screenshot comes out cut off, blank or repeated, and how to fix it

A full-page capture goes wrong in six recognizable ways, and each has one cause in how the page is built. Here is what each symptom means, what to try in Chrome's own DevTools, and what Page Scanner does about it and cannot.

A web page is not a picture waiting to be taken. It is a document that loads in pieces, reacts to the size of the window and keeps some of itself folded, pinned or painted. A full-page capture has to turn all of that into one tall image or one tall PDF, and when the result looks wrong, the cause is almost always one of six things. Each section below names a symptom, explains why any capture tool runs into it, says what you can do with Chrome's built-in DevTools capture (the method in our Chrome guide), and says what Page Scanner does about it, including what it cannot do.

It stops partway down

Why it happens. A capture needs a height, and a picture that tall has to fit in memory. Every tool sets a ceiling somewhere. Some pages have no bottom at all: an endless feed loads the next batch when you near the end, so the page is only as long as you have scrolled it, and a capture taken now gets what is there now.

In Chrome's DevTools. Scroll to the end of what you want first, so it has loaded, then run Capture full size screenshot from the Command Menu. On a feed, that means scrolling as far as you want the capture to go.

In Page Scanner. The ceiling is 60,000 CSS pixels a side by default. Maximum page height in the settings raises the height to 120,000 or 240,000 pixels, and past 60,000 the PDF is printed in bands and joined, so it keeps its text and stays sharp. The preview and any PNG or JPEG made from it get coarser as the page gets taller. What matters more is that a capture that hit the ceiling says so: the message that confirms an export leads with what the page measured, where the capture stopped and how much is missing, and an agent's scan result carries a truncated object with the same sentence. It will not pass a partial page off as a whole one.

What it cannot do is find the bottom of a page that has none. A feed that grows as it is scrolled grows only as far as the capture's layout passes let it, so it may stop short of the limit. The raster fallback, used when the debugger cannot attach, still stops at 60,000.

Images further down are blank

Why it happens. Pages load images late on purpose. An image marked loading="lazy" waits until it is near the visible part of the window, and many sites go further with a script that sets an image's source only when it scrolls into view. A capture that lays the page out or scrolls through it faster than those images arrive gets the empty boxes they were sitting in.

In Chrome's DevTools. Scroll to the bottom slowly, wait for the images to appear, then capture.

In Page Scanner. Every scan tells loading="lazy" images to load, whatever the settings say. For images a script loads on sight, turn on Open folded sections before capture: once the page is laid out at its full height, the scan then waits up to four seconds for every image still loading, and measures the page again, since an image with no size set makes it taller. On the test page built for this, whose script sets the image's source on sight and whose server takes 1.5 seconds to answer, the image was a blank box without the setting and the image with it.

The limits: an image that takes longer than four seconds is captured as far as it had arrived, and a lazy iframe is told to load but not waited for.

A header or a chat bubble repeats, or covers the text

Why it happens. A sticky header, a cookie bar pinned to the bottom and a chat bubble in the corner are all positioned against the window, not the page. A tool that scrolls and stitches takes one screenshot per screenful, and a pinned element is in every one of them, so it appears once per screen, sitting on top of whatever was under it at that moment.

In Chrome's DevTools. Remove the element before you capture. In the Elements panel, select it and press Delete (or right-click it and choose Delete element); Ctrl+Z, or Cmd+Z on a Mac, brings it back. Reloading the page does too.

In Page Scanner. The normal capture does not scroll. It lays the page out once at its full height, so the window is the whole page and a pinned header is drawn once, where it sits. Measured on a test page 150,062 pixels tall, its fixed header and footer came out once each. The clutter itself goes through Clean up before capture in the settings, four switches that are on by default: Ads, Cookie and consent banners, Chat widgets and Pop-ups and overlays. What a switch catches is hidden for the length of the scan, the page is laid out again without it so no gap is left, and the tab is left as you found it. The editor says what was hidden as the capture opens.

The rules miss some things: an ad served from the site's own address, a banner no consent service built that does not say "cookie" or "consent", a pop-up that is neither marked as a dialog nor large. For those there is Remove element (D) in the editor: point at the element on the capture, click to mark it, and press Remove, and the page is scanned again without it. That needs the original tab still open on the same page, and the new capture starts without your crop and marks.

Collapsed sections are missing

Why it happens. A capture takes the page as it stands. An FAQ with its answers folded, an accordion, the second and third tabs of a tab set: closed on screen means closed in the file, whichever tool you use.

In Chrome's DevTools. Open each one by hand, then capture.

In Page Scanner. Turn on Open folded sections before capture (off by default). The scan then opens every closed <details>, every tab panel hidden with the hidden attribute (shown one below the other), and every control that marks itself as collapsed and names the section it opens, in two rounds so an accordion inside an accordion opens too. After the capture it folds everything back up.

It never presses a plain "Show more" or "Load more" button, a link, or anything in a menu or the site's navigation, because those can load the next page of results, send a form or count a click, and nothing in the markup tells them apart. A disclosure built from a div with a click handler and no accessibility markup stays closed too, and an accordion that allows one open section at a time ends with only its last section open. Open those by hand before you scan.

Only one screen of a web app is captured

Why it happens. Web apps such as Gmail do not scroll the page. The page is exactly one window tall, and the list you scroll is a box inside it with its own scroll bar. A tool that scrolls the window, or measures the document's height, sees one screenful and stops.

In Chrome's DevTools. Chrome's documentation does not say how Capture full size screenshot treats a page that scrolls inside a box.

In Page Scanner. The normal vector capture finds the app's main scrolling box and expands it, so the whole list is in the capture. The raster fallback does not: it scrolls the window only and gets one screenful. That fallback runs when the debugger cannot attach, which most often means DevTools is open on the tab, so close DevTools before you scan an app. A smaller box that scrolls on its own inside the page, such as a code sample or a side panel, keeps its own height, and what it hides is not in the capture.

The text is a picture

Why it happens. Two different causes. Maps, charts and some document viewers paint their text into a <canvas>, and to the browser that is pixels, not words; any capture gets a picture of it. And any capture that stitches screenshots produces an image, so none of its text can be selected.

In Chrome's DevTools. Its screenshot is a PNG, so all of its text is a picture anyway.

In Page Scanner. A normal capture's PDF keeps the page's own text as text, but canvas text arrives as artwork. Text in pictures in the Output Format panel, set to Recognize it, on this computer by default, reads that text when you extract and lays it over the picture invisibly, so the PDF can be searched and copied. It reads English, Korean, Japanese, Simplified Chinese and Italian, runs on your computer, can make mistakes, and is not the page's own text. It reads canvases and raster captures, not the text inside an <img> or a CSS background, and only a PDF carries it.

If the whole PDF is an image, DevTools was probably open on the tab and the scan fell back to stitching screenshots. Close DevTools and scan again.

Frequently asked questions

Why is a full-screen banner taller in the capture than on screen? Page Scanner pins anything sized to the screen at its on-screen height before it lays the page out. A height the page sets inline with !important, or in a stylesheet served from another domain, is out of its reach.

Should I leave the clean-up on for every capture? Not for a capture you keep as a record of how the page looked. What the clean-up hides is not in the file, so turn all four switches off for that; the integrity record counts what was hidden when anything was.

Why does the capture have the light theme when I use dark mode? It follows Page color scheme in the settings, which matches the browser by default. A site that picks its theme in JavaScript when it loads keeps the one it chose.

Where this comes from

Keep reading