Repository: puppeteer
Issue: [Bug]: inconsistent PDF rendering for transform on HTML from 19.2.0 onwards
Labels: bug,upstream,confirmed,P3

### Minimal, reproducible example

```TypeScript
# This forms part of a POST endpoint

const options = {
  printBackground: true,
  format: 'A4',
  margin: {
    top: '9mm',
    bottom: '9mm',
    left: '9mm',
    right: '9mm'
  }
};

const renderedContent = 
    `<!DOCTYPE html><html><head><title>Calculation Sheet</title><style>body{font-family:Arial,sans-serif}.report-content{width:100%;margin:0 auto}.report-content-info{display:flex;justify-content:space-between;margin-bottom:20px}.report-content-info-logo svg{width:100px}.report-content-info-title{flex-grow:1;text-align:center}.report-content-info-text-key{font-weight:700}.report-content-info-text-value-large{font-size:1.5em}.aligner{display:flex;align-items:center}table{width:100%;border-collapse:collapse}thead{display:table-header-group}tbody{display:table-row-group}tfoot{display:table-footer-group}td,th{padding:8px;border:1px solid #000}th{background-color:#f2f2f2}</style></head><body><div class="report-content"><table><thead><tr><td><div class="report-content-info"><div class="report-content-info-logo"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="110" width="205" viewBox="0 0 122.14667 65.466667"><g transform="matrix(1.3333333,0,0,-1.3333333,0,65.466667)"><g transform="scale(0.1)"><rect width="122.14667" height="65.466667" style="fill:#000"></rect></g></g></svg></div><div class="report-content-info-title"><p class="report-content-info-title-text">Header</p></div><div class="report-content-info-text-key report-content-info-1"><p class="report-content-info-text-key">Subheading.</p></div><div class="report-content-info-text-key report-content-info-2"><p class="report-content-info-text-key">Subheading.</p></div><div class="report-content-info-3"><p class="report-content-info-text-value-large"></p></div><div class="report-content-info-4"><p class="report-content-info-text-value-large"></p></div><div class="report-content-info-text-key report-content-info-5"><p class="report-content-info-text-key">Subheading</p><div class="aligner"><p class="report-content-info-text-value"></p></div></div><div class="report-content-info-text-key report-content-info-6"><p class="report-content-info-text-key">Subheading</p><div class="aligner"><p class="report-content-info-text-value-large"></p></div></div><div class="report-content-info-text-key report-content-info-7"><p class="report-content-info-text-key">Subheading</p><div class="aligner"><p class="report-content-info-text-value"></p></div></div><div class="report-content-info-8"><p class="report-content-info-text-key">Subheading</p><div class="aligner"><p class="report-content-info-text-value"></p></div></div><div class="report-content-info-9"><p class="report-content-info-text-key">Subheading</p><div class="aligner"><p class="report-content-info-text-value">Date</p></div></div><div class="report-content-info-text-key report-content-info-10"><p class="report-content-info-text-key">Subheading</p><div class="aligner"><p class="report-content-info-text-value"></p></div></div></div></td></tr></thead><tbody class="report-content-calculation"><tr><td>Content Row 1</td></tr><tr><td>Content Row 2</td></tr><tr><td>Content Row 3</td></tr><tr><td>Content Row 4</td></tr><tr><td>Content Row 5</td></tr><tr><td>Content Row 6</td></tr><tr><td>Content Row 7</td></tr><tr><td>Content Row 8</td></tr><tr><td>Content Row 9</td></tr><tr><td>Content Row 10</td></tr><tr><td>Content Row 11</td></tr><tr><td>Content Row 12</td></tr><tr><td>Content Row 13</td></tr><tr><td>Content Row 14</td></tr><tr><td>Content Row 15</td></tr><tr><td>Content Row 16</td></tr><tr><td>Content Row 17</td></tr><tr><td>Content Row 18</td></tr><tr><td>Content Row 19</td></tr><tr><td>Content Row 20</td></tr><tr><td>Content Row 21</td></tr><tr><td>Content Row 22</td></tr><tr><td>Content Row 23</td></tr><tr><td>Content Row 24</td></tr><tr><td>Content Row 25</td></tr></tbody><tfoot><tr><td><div class="report-content-footer aligner"><p class="report-content-footer-key">Footer</p><div class="aligner"><p class="report-content-footer-value"></p></div></div></td></tr></tfoot></table></div></body></html>`

let browser = await getBrowser()

const page = await browser.newPage();
await page.setContent(renderedContent);
await page.addStyleTag({path: 'public/stylesheets/index/style.css'});
await page.addStyleTag({path: 'public/stylesheets/index/katex.local.css'});

const buffer = await page.pdf(options);
await page.close();

return res.status(200).contentType("application/pdf").send(buffer);
```


### Error string

no error

### Bug behavior

- [ ] Flaky
- [X] PDF

### Background

I have noticed that from version 19.2.0 onwards, PDF rendering of the this HTML (https://codebeautify.org/htmlviewer/y24e10232) is no longer consistent with earlier versions. We are using the HTML to generate a PDF report that contains a `thead` which has an SVG that is scaled. In this example, I've made that SVG a simple rectangle as the issue reproduces with this.

I have tested with the latest version of Puppeteer (22.12.1), but did some scoping that this error started occurring in 19.2.0 onwards.

### Expectation

I am expecting the output PDF to have a scaled black box from the SVG due to the transform being applied in `thead`.

The HTML can be viewed in the link shared in the background section, but the notable part occurs here with the scaling of the SVG:

```
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="110" width="205" viewBox="0 0 122.14667 65.466667">
  <g transform="matrix(1.3333333,0,0,-1.3333333,0,65.466667)">
    <g transform="scale(0.1)">
      <rect width="122.14667" height="65.466667" style="fill:#000000;"></rect>
    </g>
  </g>
</svg>
```

All headers (for each page) in the output PDF should contain a scaled box, as per behaviour in versions < 19.2.0.


**< 19.2.0:**

![correct](https://github.com/puppeteer/puppeteer/assets/77862637/c7d476d2-f708-42ce-8ede-a14b4ce1c77e)




### Reality

Instead of scaling being applied to the SVGs in the header of each PDF page, it only appears to apply to the SVG in the header of the **FINAL** page of the PDF. From version 19.2.0 and later:

**>= 19.2.0:**

![err2](https://github.com/puppeteer/puppeteer/assets/77862637/b093281d-96a7-4a31-ab58-6380a4394687)


### Puppeteer configuration file (if used)

```TypeScript
// See https://pptr.dev/guides/configuration#examples

const {join} = require('path');

/**
 * @type {import("puppeteer").Configuration}
 */
module.exports = {
  // Changes the cache location for Puppeteer.
  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
};
```


### Puppeteer version

22.12.1

### Node version

20.14.0

### Package manager

npm

### Package manager version

10.7.0

### Operating system

Windows