New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chrome seems to have a hard limit when taking screenshots of tall pages #359

Open
guilhermehn opened this Issue Aug 17, 2017 · 5 comments

Comments

Projects
None yet
6 participants
@guilhermehn

guilhermehn commented Aug 17, 2017

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:

image

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

This comment has been minimized.

Member

paulirish commented Aug 17, 2017

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

This comment has been minimized.

timhaines commented Aug 17, 2017

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

@djones

This comment has been minimized.

djones commented Aug 17, 2017

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

This comment has been minimized.

Member

paulirish commented Oct 2, 2017

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

@guowenfh

This comment has been minimized.

guowenfh commented Sep 10, 2018

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....

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment