Browser Rendering API doesn't show much of the Stripe header

I've been having a play around with the Browser Rendering API to see what it's capable of, but ran into this issue.

The Stripe website is showing up as per the attached image.

Minimum reproducible example:

import puppeteer from '@cloudflare/puppeteer';

interface Env {
    MYBROWSER: Fetcher;
}

export default {
    async fetch(request, env): Promise<Response> {
        const normalizedUrl = new URL('https://stripe.com').toString();

        const browser = await puppeteer.launch(env.MYBROWSER, {

        });
        const page = await browser.newPage();
        await page.setViewport({ width: 1920, height: 1080 });
        await page.goto(normalizedUrl, { waitUntil: 'networkidle0' });

        const img = (await page.screenshot({ fullPage: true })) as Buffer;

        await browser.close();

        return new Response(img, {
            headers: {
                'content-type': 'image/jpeg',
            },
        });
    },
} satisfies ExportedHandler<Env>;
image.png
Was this page helpful?