Why your fixed header disappears in Puppeteer fullPage screenshots (and how to fix it)

I spent two evenings debugging this. Sharing so you don't have to.

The problem

When you call page.screenshot({ fullPage: true }) on a site with a position: fixed header, one of three things usually happens:

1. The header renders in the middle of the page (not at the top)
2. The header area is blank at the top of the PDF/PNG
3. Only the first page shows the header — subsequent "pages" don't

You open the site in a real browser: looks perfect. You open it in Puppeteer's viewport mode: also fine. Only fullPage: true breaks it.

Why this happens

Puppeteer's fullPage: true uses Chrome DevTools Protocol's captureBeyondViewport. Under the hood, Chrome rasterizes the whole document beyond the viewport — but position: fixed elements are painted relative to the current viewport, not the document. So if your script scrolled to the bottom of the page before taking the screenshot, the fixed header is captured at the bottom.

There's also a second issue: many sites have scroll-behavior: smooth on html. When you call window.scrollTo(0, 0), the scroll is animated and doesn't complete instantly. If Puppeteer captures before the animation finishes, header ends up in a weird intermediate position.

The fix

Three things need to happen before the screenshot:

1. Kill smooth scrolling so scrollTo is instant
2. Reset any hide-on-scroll transforms that JS scroll handlers may have applied
3. Actually scroll to (0, 0) and wait a tick for paint

Here's the code I use in production:

async function prepareForScreenshot(page) {
    await page.evaluate(() => {
        // Disable smooth scrolling — make scrollTo instant
        const style = document.createElement('style');
        style.textContent = 'html { scroll-behavior: auto !important; }';
        document.head.appendChild(style);

        // Reset hide-on-scroll state on common header selectors
        const headers = document.querySelectorAll(
            'header, .header, [class*="header" i], nav[class*="header" i]'
        );
        headers.forEach(el => {
            const cs = window.getComputedStyle(el);
            if (cs.position === 'fixed' || cs.position === 'sticky') {
                el.style.setProperty('transform', 'none', 'important');
                el.style.setProperty('opacity', '1', 'important');
                el.style.setProperty('visibility', 'visible', 'important');
                if (cs.display === 'none') {
                    el.style.setProperty('display', 'flex', 'important');
                }
                // Remove common "hidden on scroll down" classes
                ['hidden', 'is-hidden', 'scroll-up', 'scroll-down', 'header--hidden']
                    .forEach(c => el.classList.remove(c));
            }
        });

        // Scroll to top — now instant
        window.scrollTo(0, 0);
    });

    // Give the browser one paint frame to settle
    await new Promise(r => setTimeout(r, 300));
}

Call it right before page.screenshot:

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

When the simple fix isn't enough

If the site has a transparent header overlaid on a hero (common modern pattern), the above works great — the header just renders on top of the hero like in a browser.

If the site has a hide-on-scroll JS library that listens to scroll events after your reset, you may need to dispatch a synthetic scroll event to let it re-evaluate:

window.scrollTo(0, 0);
window.dispatchEvent(new Event('scroll'));

What I'm building

I'm working on Site2PDF — a tool that converts any website to PDF, PNG, JPG or ZIP. This exact fix is running in production there. If you want to try it, the free plan is 5 archives/month with all formats and advanced options (cookie banner removal, sticky header unfix, accordion expansion).

Feedback welcome!