[BUG] Full-page screenshot in headful mode got replicated portions for website with big height

[wbeuil]

Seems like the page.screenshot is not running exactly the same between headless and headful for websites with big height. The headful one got multiple replicated portions of the website, whereas the headless one is what I want. Please find below a way to replicate my issue.

System info

• Playwright Version: v1.40.1
• Operating System: macOS 14.2.1
• Browser: Chromium

Source code

const playwright = require('playwright');

async function takeScreenshot(browser, path) {
  const url = "https://fr.wikipedia.org/wiki/Paris"
  const page = await browser.newPage()
  await page.goto(url)
  await page.screenshot({ path, fullPage: true })
  await page.close()
  await browser.close()
}

(async () => {
  const browser1 = await playwright.chromium.launch({ headless: true })
  await takeScreenshot(browser1, 'screenshot-1.png')
  const browser2 = await playwright.chromium.launch({ headless: false })
  await takeScreenshot(browser2, 'screenshot-2.png')
})()

Steps

• Run the above code
• Compare both screenshots

Expected

The full page website as the headless one.

Actual

The headful screenshot got replicated portions of the website.

[mxschmitt]

Folding into https://github.com/microsoft/playwright/issues/12683.