Fullpage Screenshot Problem with some Single Page Websites

[grafaerig]

Tell us about your environment:

• Windows10
• puppeteer 0.11.0

Problem?

Fullpage screenshots of single page websites will not be displayed correctly.
I tried to clip areas, scrolling through the page and waitForNavigation.

Similiar problems with navalia, chromeless and phantomjs.

Is there anything else i can do?

Steps reproduce

`const puppeteer = require('puppeteer');
var url = "http://thehenhouse.com.au/"; // page url
var name = "the"
var resWidth = 1366; // width of screenshot
var resHeight = 1000;

(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage()
await page.goto(url, {waitUntil: 'load'});
// await page.waitForNavigation({waitUntil: 'networkidle'});
await page.setViewport({width: resWidth, height: resHeight});
await page.emulateMedia('screen');
await page.screenshot({path: name + '-' + resWidth + '.jpeg', type: 'jpeg', fullPage: true});
console.log("screenshot done");

await browser.close();
})();`

[Kalliser]

+1 I encounter same bug on mobile version of a website, in a ubuntu environnement.

[rohmanhm]

Seems they have lazy load image.

[riston]

Scrolling with some wait time didn't solve the issue?

[rohmanhm]

For now, I solved my problem with image lazy load by set page viewport height as max as possible.

await page.setViewport({
      width: 1440,
      height: 10000 // set whatever you want
})

[grafaerig]

Scrolling with wait time and declare the height of the viewport to a large number does not solve the problem with some pages, e.g. http://thehenhouse.com.au/

[cjroebuck]

Use something like urlbox.io? Handles full-height backgrounds ok in full screen mode. https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/f1dec2f00eee0b46452e2519b48c660a36d09eb9/png?url=http%3A%2F%2Fthehenhouse.com.au%2F&full_page=true

[tommedema]

@cjroebuck this is not a solution as some of us may be trying to create services similar to urlbox.io using puppeteer.

[tommedema]

I believe the problem here is that Puppeteer is naively increasing the client height. This is not the same as making an actual screenshot of content below the fold (scrollbar), because content dynamically adjusts based on the client height (e.g. if you use vh sizing in CSS).

Therefore we need an actual "screenshot content below the fold" feature, rather than a hack that is simply making the screen size larger temporarily.

[xavierraffin]

+1 same issue on https://evo.ca

[msadougi]

add this code before screenshot to fix:

await page.evaluate(async () => { var allElems = window.document.getElementsByTagName("*"); for (var i = 0, max = allElems.length; i < max; i++) { var hEleme = window.getComputedStyle(allElems[i]).height; if(hEleme != 'auto'){ var numdEleme = Number(hEleme.slice(0, -2)); if(numdEleme > 100 && numdEleme < 1000){ allElems[i].style.setProperty("height", numdEleme + 'px', "important"); } } } return true; });

[ernests]

add this code before screenshot to fix:

await page.evaluate(async () => { var allElems = window.document.getElementsByTagName("*"); for (var i = 0, max = allElems.length; i < max; i++) { var hEleme = window.getComputedStyle(allElems[i]).height; if(hEleme != 'auto'){ var numdEleme = Number(hEleme.slice(0, -2)); if(numdEleme > 100 && numdEleme < 1000){ allElems[i].style.setProperty("height", numdEleme + 'px', "important"); } } } return true; });

This works for some cases. I'm still getting long pages. By the way, instagram.com is one of them!

[zakariamouhid]

using last version of puppeteer (version 8.0.0) seems to work.
it works using --window-size argument but not working using viewport.

const puppeteer = require('puppeteer');
const height = 720, width = height * 16 / 9;
const url = 'https://thehenhouse.com.au/';
const options = {
    args: [
      '--window-size=' + width + ',' + height,
    ],
    devtools: false,
    headless: true,
    defaultViewport: null,
};
const browser = await puppeteer.launch(options);
const page = await browser.newPage();
await page.goto(url);
await page.screenshot({
  path: 'example.png',
  fullPage: true
});

example in replit
https://replit.com/@zakariamouhid/puppeteer-test-bash#main.js

[ar-naseef]

I tried with puppeteer 8.0.0 and it works. Wondering if I can get the AWS lambda layer for Puppeteer 8.0.0?

[stale]

We're marking this issue as unconfirmed because it has not had recent activity and we weren't able to confirm it yet. It will be closed if no further activity occurs within the next 30 days.

[stale]

We are closing this issue. If the issue still persists in the latest version of Puppeteer, please reopen the issue and update the description. We will try our best to accomodate it!