ElementHandle screenshot doesn't work properly when the element is offscreen

Tell us about your environment:

• Puppeteer version: 5.3.0
• Platform / OS version: Fedora 32
• Node.js version: 12.18.3

What steps will reproduce the problem?

let’s say we have a page where there are “card” divs

<div class="card">blah blah</div>
<div class="card">blah blah blah</div>

const cards = await page.$$("div.card");
  
for (const [idx, card] of cards.entries()) {
  await card.screenshot({
    path: `pnl${idx}.png`
  });
}

specifically, this happens on ftx.com/shareable-pnl, like this: element 1 element 2, wrong

What is the expected result? proper screenshots

What happens instead? the screenshot for the first card will come out fine, the second one comes incorrectly cropped from halfway to the bottom plus

[whoisjuan]

@whoisjuan found a workaround? do you remember what was the last version that worked?

@mikelpr Yep. Unfortunately, you will have to downgrade a lot. This happened when 2.0.0 was released. Here is the feedback issue for that specific change: https://github.com/puppeteer/puppeteer/issues/5080 I asked yesterday if there was a workaround yet and it seems that they have been talking about it recently: https://bugs.chromium.org/p/chromium/issues/detail?id=1003629#c11

So give it a try with https://github.com/puppeteer/puppeteer/releases/tag/v1.20.0 and if that solves your problem, then it means that your issue is indeed related to this change. But I’m like 95% sure that this is your problem.

[stale[bot]]

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!