Puppeteer Screenshot Clips Content Below a Fixed Footer: How to Fix It

If a Puppeteer screenshot cuts off content below a fixed footer, first confirm that you want the whole document and set fullPage: true. If the footer still visually covers content, temporarily change that specific footer to normal document flow with a targeted CSS override, then capture again. Also check for an unintended clip rectangle: a full-page option cannot correct a deliberately restricted capture region.

Puppeteer documents fullPage as capturing the full page; it defaults to false. A fixed footer is a layout issue as well as a screenshot configuration issue: because it is positioned relative to the viewport, it can overlap document content. The CSS adjustment below is a page-specific workaround to evaluate, not a dedicated Puppeteer footer option. See the ScreenshotOptions API reference and the Puppeteer screenshot guide.

1. Confirm what area you intend to capture

Choose the capture mode based on the output you need:

Goal	What to check
Visible browser viewport	Use a regular screenshot without fullPage. Content outside the viewport is not part of this capture.
Entire document	Set fullPage: true.
A particular region	Use clip only when you intentionally want a rectangle; verify its coordinates and dimensions.
One element	Capture the target element instead of the whole page if that is the actual requirement. Puppeteer documents element screenshots in its screenshot guide.

Start with this minimal full-page capture:

await page.screenshot({ path: 'page.png', fullPage: true });

2. Check for an accidental clip

The clip option defines a capture rectangle. If your code passes one, inspect its x, y, width, and height values against the desired area. A rectangle that ends above the bottom of the document will cut off content even when the rest of your screenshot setup is correct. Remove clip for a full-document capture, or correct the rectangle when a region is intended.

// Full document: do not constrain the capture with a clip rectangle.
await page.screenshot({ path: 'page.png', fullPage: true });

// Deliberate region: set the rectangle to the exact area you need.
await page.screenshot({
  path: 'region.png',
  clip: { x: 0, y: 0, width: 1200, height: 900 },
});

The example dimensions are illustrative; choose values that match your page and intended region. Puppeteer lists clip separately from fullPage in the screenshot options.

3. Temporarily put the fixed footer into document flow

If the footer itself is drawn over content, test a narrowly scoped style override immediately before capture. Replace .site-footer with the selector for the actual footer on your page:

await page.addStyleTag({
  content: '.site-footer { position: static !important; }',
});

await page.screenshot({ path: 'page.png', fullPage: true });

Changing position can affect layout, so inspect the resulting image on the target page. The override may move the footer into the document flow and make it take up space where it previously overlaid content. If the footer should not appear in the image at all, test hiding that specific element instead:

await page.addStyleTag({
  content: '.site-footer { display: none !important; }',
});

await page.screenshot({ path: 'page.png', fullPage: true });

Use one of these page-specific approaches only if it matches the intended screenshot. If the page will continue to be used after capture, restore the original styling or reload the page before continuing.

4. Use a complete Puppeteer example

This runnable Node.js example opens a page, optionally applies the footer override, captures the full document, and closes the browser. Install Puppeteer in your project with npm install puppeteer, save the code as capture.mjs, and run node capture.mjs. Set TARGET_URL to the page you are allowed to capture.

import puppeteer from 'puppeteer';

const targetUrl = process.env.TARGET_URL ?? 'https://example.com';
const browser = await puppeteer.launch({ headless: true });

try {
  const page = await browser.newPage();
  await page.goto(targetUrl, { waitUntil: 'networkidle2' });

  // Replace this selector with the fixed footer selector for the target page.
  await page.addStyleTag({
    content: '.site-footer { position: static !important; }',
  });

  await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
  await browser.close();
}

The CSS override is optional. First try the full-page capture without it; add the override only if the fixed footer overlaps content in the output. The example uses networkidle2 as a navigation wait condition, but some sites keep network requests open. If navigation does not settle, choose a wait condition appropriate to the page and wait for a specific page element or state before capturing.

5. Understand captureBeyondViewport and version behavior

captureBeyondViewport controls capture outside the viewport in relevant screenshot cases, but it is not a universal fix for content overlap. The current ScreenshotOptions reference documents its default as false when there is no clip and true when a clip is present. Explicitly setting it to true will not fix a footer that is visually overlaid on the content or a clip rectangle that excludes the desired area.

Check the API documentation for the Puppeteer version installed in your project before adopting an option or workaround. Older issue discussions may describe behavior tied to a specific Chromium roll or Blink flag. For example, Puppeteer issue #5080 is historical discussion, not a guarantee that an old workaround applies to a current installation.

6. Troubleshoot common causes

Symptom	Likely cause	What to try
Screenshot ends at the viewport bottom	The call uses the default fullPage: false.	Set fullPage: true for a full-document capture.
Only the area above a particular boundary appears	A clip rectangle restricts the image.	Remove the clip for full-page output, or correct its x, y, width, and height.
Footer covers the last content in the image	The fixed footer is laid out relative to the viewport and overlays document content.	Test a targeted temporary override such as position: static; hide the footer only if it should not appear.
Changing captureBeyondViewport has no effect	The cause is layout overlap or incorrect clip geometry rather than capture beyond the viewport.	Inspect the footer’s CSS and the clip rectangle; use the option only for its documented capture behavior.
An old workaround no longer works	The workaround may depend on an older Puppeteer or Chromium version.	Check the installed Puppeteer version and its matching API documentation; do not assume a historical browser flag is current.
Page content is missing even though the screenshot is full-page	The page may not have finished rendering or loading the content before capture.	Wait for the relevant element or page state before taking the screenshot, and inspect the page output independently of footer positioning.

7. Keep captures reliable and efficient

• Make the smallest necessary page change. Target the footer selector instead of changing positioning rules for every fixed element.
• Capture at a stable page state. Wait for the content you need rather than relying on an arbitrary delay where a specific selector can indicate readiness.
• Keep the screenshot mode explicit. Set fullPage for the full document and avoid carrying a clip from a different capture path.
• Check browser compatibility. Puppeteer controls a browser version with behavior that can change across releases; validate workarounds against the installed version and current reference.
• Account for image size. A full-page image can be substantially larger than a viewport capture, so capture only the region or element needed when the whole document is unnecessary.

The research sources do not provide performance benchmarks or cost figures for these capture strategies, so there is no reliable numeric comparison to give. In practical terms, full-document capture produces more image content than viewport capture, and page-specific CSS changes can alter what the image represents. Keep those tradeoffs in mind when selecting the capture mode.

8. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its one-call API can return an image or PDF without setting up Puppeteer and a browser in your project. See the ScreenshotNeo API documentation for request options.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed, and response headers report the page verdict and billing status. Its MCP server lets AI agents use screenshot tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

Sign up free for 1,000 screenshots a month, with no card required.

FAQ

Does fullPage: true remove a fixed footer?

No. It requests a full-page screenshot. If the footer still covers content, address the page’s layout for the capture, for example with a targeted temporary style override.

Should I always hide the footer?

No. Keep it if it belongs in the screenshot and does not obscure content. If it is the source of the overlap, test moving it into document flow; hide it only when the desired output excludes it.

Is captureBeyondViewport: true required for full-page screenshots?

Do not treat it as a general requirement or a cure for overlap. Check the options reference for your Puppeteer version and diagnose the actual clip and layout first.

Can I use an element screenshot instead?

Yes, when the required output is a specific element rather than the entire page. That changes the capture target; it does not fix a full-page layout overlap.