Chrome seems to have a hard limit when taking screenshots of long pages

[guilhermehn]

I'm using puppeteer (previously was using pure CDP) to take screenshots from all the endpoints of my application and some pages that contain legal info and EULA are really tall. Like really tall:

And the resulting screenshots are only 16384px high. When debugging the headless instance with devTools the page seems to be fully rendered.

Here's the minimal snippet:

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url, {
	waitUntil: 'load'
});
await page.setViewport({
	width: size, // 320, 768, 1024, 1280
	height: 600
});
const screenshot = await page.screenshot({
	fullPage: true
});
browser.close();
fs.writeFileSync('./results/screenshot.png', screenshot);

Some of the tall pages screenshots result in a completely white screenshot. If I set the viewport using the page.evaluate method, it seems to work, but the height limit of 16384px still holds true.

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url, {
	waitUntil: 'load'
});
await page.setViewport({
	width: size, // 320, 768, 1024, 1280
	height: 600
});
await page.setViewport({
	width: size,
	height: await page.evaluate(() => document.body.clientHeight)
});
const screenshot = await page.screenshot();
browser.close();
fs.writeFileSync('./results/screenshot.png', screenshot);

But regardless of the technique used, the screenshots' height are all capped to 16384px.

[paulirish]

Currently the maximum height is hardcoded in Chromium to that height.
More information: https://groups.google.com/a/chromium.org/d/topic/headless-dev/DqaAEXyzvR0/discussion

[timhaines]

@paulirish It would be very nice if Chrome handled the stitching together of tall pages for you. :)

[djones]

I have the same issue here. Here's another highly relevant thread https://bugs.chromium.org/p/chromium/issues/detail?id=638281

Two thoughts:

1. When the GPU is disabled, pure software rendering is used instead and therefore the max texture size is not relevant but unfortunately currently remains set. A flag could be added to Chrome, that when used in conjunction with --disable-gpu, would allow the max texture size to be far bigger. Something like --max-texture-size=50000. The current max texture size is hardcoded here: https://cs.chromium.org/chromium/src/cc/resources/resource_provider.cc?l=344 and is very arbitrary.

2. If 1) is not feasible, a stitcher would have to be written to scroll, take snapshot, scroll etc. Perhaps something like this would be in the scope of puppeteer? Otherwise page.screenshot({fullPage: true}); is a little misleading.

[paulirish]

I've put up the basic workaround for this bug here: #937

[guowenfh]

I testting to puppeteer1.7.0 node8.11.2.

screenshot images max height is 65000

page.screenshot({
   clip:{
    x:0,
    y:0,
    height:65000
  }
})

if height greater than 65000, local image file is size to 0kb....

[adamchenwei]

lol @dgozman's solution works sooooo well! crazy fast. and it has been like... what two years? lol can't this be set to be some sort of default for puppeteer or a config to allow large pages render correctly in screenshot? or maybe add warning when this sort of large page render likely took place?

[schliflo]

@adamchenwei I can't find the solution you're talking about. Can you provide a link to it please? Thank you!

[yhafri]

lol @dgozman's solution works sooooo well! crazy fast. and it has been like... what two years? lol can't this be set to be some sort of default for puppeteer or a config to allow large pages render correctly in screenshot? or maybe add warning when this sort of large page render likely took place?

@achenwei-chwy can you please point the solution?

[travisdowns]

Not sure if something has changed here, but I have been able to successfully take screenshots of > 50,000 pixels height using puppeteer 10.2.0 in headless mode.

[jrandolf]

Close due to staleness. Please reopen if the issue remains in the latest version.

[cooljacket]

Close due to staleness. Please reopen if the issue remains in the latest version.

Hello jrandolf, are you sure the latest version dose fix the problem? I'm using the latest 15.3.1 version, while this problem hit me.

The viewport size is 9354 * 6622 with deviceScaleFactor 1.5, screenshot with 'fullPage: true', and incomplete in the right bottom side.

But when I just clip the right bottom part, it becomes complete picture.

So I guess that it maybe somewhere like an array has fix length, the screenshot data was cut down.