Repository: puppeteer
Issue: [Bug]: Screenshots with certain overflow and border styles render incorrectly
Labels: bug,screenshot,confirmed,P3

### Bug description

I take screenshots of my blog on each commit. Sometimes, code samples render as empty boxes instead of how they should. You can find an example [here](https://github.com/travisdowns/blog-screenshots/blob/94373745c799f65abac7249034f06c61c74e1b52/dark-414px/blog/2019/06/11/speed-limits.html.png): scroll up from the bottom past all the footnotes to the last code sample, and it looks like this:

![image](https://user-images.githubusercontent.com/2403521/133864850-8f2b5385-dcc2-4df1-b4c0-e1e5f5cf56b8.png)

The second box should not be empty.

Steps to reproduce the problem:

Take a full page screenshot of [this test page](https://travisdowns.github.io/misc/puppeteer-test.html) at a viewport width of 600px.

This page is a ~17,000 pixel tall page, with a `<pre>` element at the bottom which should be red and contain some numbers, like this (showing the bottom only):

![image](https://user-images.githubusercontent.com/2403521/133864305-5e238852-8875-458f-afea-b5ba5c89a44a.png)


You can take a full-screen screenshot by cloning [this tool](https://github.com/travisdowns/snap-site), then running it like this:

~~~
node snap-site.js --width=600 --out-dir=output --url=https://travisdowns.github.io/misc/puppeteer-test.html
~~~

Examine the bottom of the screenshot in `output/travisdowns.github.io/misc/puppeteer-test.html.png`, you will see that the last `pre` tag is empty, no background color, no text, like this:

![image](https://user-images.githubusercontent.com/2403521/133864369-01d08981-528c-4146-a4f5-74ce0c6dd0a1.png)

If you do a 1200px screenshot by changing `--width=600` to `--width=1200`, the box is correctly rendered:

![image](https://user-images.githubusercontent.com/2403521/133864410-7bb7e465-ddda-4e89-8df4-21855fa719ad.png)

The HTML of the test page is as follows:

~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Puppeteer Test Page</title>
<style>
pre {
  /* these three properties seen necessary for the issue to occur */
  border: 1px solid grey;
  border-radius: 2px;
  overflow: scroll;

  /* background-color is not necessary, it just makes it obvious when it happened */
  background-color: red;
}
</style>
</head>
<body>
    
<div style="height: 17000px">
FILLER
</div>

test at: 23:10:00
<pre>
0         1         2         3         4         5         6         7         8         9
0 2 4 6 8 0 2 4 6 8 0 2 4 6 8 0 2 4 6 8 0 2 4 6 8 0 2 4 6 8 0 2 4 6 8 0 2 4 6 8 0 2 4 6 8 0
</pre>

</body>
</html>
~~~

Based on my reduction of the test case, the following criteria are required for the issue to manifest:

1) The element should have a border with non-zero `border-radius`
2) The `border-radius` must be larger than `border-width`
3) `overflow: scroll` should be set (perhaps `auto` works too)
4) The element should appear below ~16K pixels on the page. That is, the vertical position of the element is in the first ~16K pixels, it will be rendered correctly.
5) The content of the element should be wide enough that scrolling is possible (that's why the 1200px screenshot doesn't have the issue, although it would if you increased the length of the lines in the `<pre>` element).

I suppose the first two conditions are setting up a scenario where the area to scroll is non-square or something like that? I.e., if the border radius is large enough, it cuts off the corners of the scrollable area (if the border-width is sufficiently large, it avoids this effect since the inner content rectangle doesn't extend beyond the border or something like that).





### Puppeteer version

10.2.0

### Node.js version

v10.19.0

### npm version

6.14.4

### What operating system are you seeing the problem on?

Linux

### Relevant log output

_No response_