[BUG] Chromium fullPage screenshot mistreats vh and vw units

[KartoffelToby]

I tested a very basic code with playwright. to take a fullpage screenshot of a webpage with a css typed header thats using height: 65vh;

The problem here with pupeeter is that the viewport haven't any relation to the vh. so the Screenshot has the wrong result. Playwright with chroimuim have the same problem.

But playwright with Firefox Headless Browser take the right result.

So i think the core bug is in Chroimuim.

Are there any Solutions that all 3 Browsers can handle CSS vh and vw with the right viewport?

My testing code is:

const playwright = require('playwright');

(async () => {
  for (const browserType of ['chromium', 'firefox']) {
    const browser = await playwright[browserType].launch({
      args: [
        '--disable-gpu',
        '--no-sandbox',
        '--disable-web-security',
        '--disable-dev-profile'
      ]
    });

    const  context = await browser.newContext({
      viewport: {
        width: 1920,
        height: 1080
      }
    });

    const page = await context.newPage('https://elements.t-haber.de/');
    await page.screenshot({ path: `example-${browserType}.png` , fullPage: true });
    await browser.close();
  }
})();

[duytran-agilityio]

I saw the same issue. I see the results are different between Firefox and Chromium. Firefox has a better results.

[Prior99]

I have the same issue with an even more basic site. Chromium just doesn't screenshot the whole page.

[Lemaro86]

I have the same issue, when pw try to create screenshot, he has got only background without text and with wrong page information. Why? Bug reproduced only for chromium, firefox and webkit ok

[dschultz0]

I've found the same issue when working with Playwright and trying to perform screenshots of pages that have headers that are sized based on viewport height (i.e. 70vh). What's happening is that for the Chromium browser Playwright is resizing the viewport to the height of the page, while for Firefox and Webkit it's not. The result is that the page is re-rendered with a header continuing to take up 70% of the viewport. In my case this causes most of the content from the page to get pushed out of the screenshot by an absurdly large header.

It appears the behavior is specified by the value returned by canScreenshotOutsideViewport() in playwright-core/src/server/chromium/crPage.ts and playwright-core/src/server/firefox/ffPage.ts. For Firefox and Webkit it's true, but for Chromium it's false. It appears that while Puppeteer is able to support capturing a screenshot beyond the bounds of the viewport in Chromium, Playwright isn't at this point.

It would be great to get this addressed as it will be a blocker to adopting Playwright for us.

[mxschmitt]

Should be fixed in https://github.com/microsoft/playwright/pull/10606