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

[mikelpr]

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]

I'm experiencing something similar. Using clip in the screenshot if you go beyond the current viewport height used to work but not anymore. Before it was possible to take a clip with a dimension beyond the viewport. This was particularly useful to understand what's happening before scroll or if you needed to keep the dimension of elements with vw or vh units.

[mikelpr]

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

[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: #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.

[mikelpr]

I worked around by removing each element after taking its screenshot. what a shitshow these bug reports, I'm also being hugely bothered by #5612 #921 and there are many more of basically that same issue and devs don't come near after years. (I suppose the chrome devs fault)

[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!