Repository: puppeteer
Issue: [Bug]: PDF rendering looks crooked
Labels: bug,upstream,confirmed,P3,chrome

### Minimal, reproducible example

```TypeScript
import puppeteer from "puppeteer";
import fs from 'fs';

const browser = await puppeteer.launch();

const VIEWPORT_OPTIONS = {
  width: 1200,
  height: 800,
  deviceScaleFactor: 2,
};

const HTML_PATH = 'source.html';

const PDF_OPTIONS = {
  printBackground: true,
  format: 'A4',
  path: 'crooked.pdf'
};

const IMAGE_OPTIONS = {
  fullPage: true,
  path: 'ok.png',
};

const renderedContent =
  `<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        padding: 2em;
        width: 100vw;
        height: 100vh;
        image-rendering: pixelated;
        background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 20px 20px;
      }

      .rating-circle {
        --background-color: red;
        display: inline-block;
        position: relative;
        padding: 0.5em;
        margin-right: 0.5em;
        z-index: 1;
        font-weight: 700;
        font-size: 0.7em;
        line-height: 0;
        color: white;
        text-align: center;
      }

      .rating-circle::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        background: var(--background-color);
        width: 100%;
        min-width: 2em;
        aspect-ratio: 1/1;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    Check the differences between <u>chrome-pdf</u>, <u>chrome-image</u> and <u>html</u> rendering
    <span class="rating-circle" style="color: white; --background-color: red">1</span>
    <span class="rating-circle" style="color: white; --background-color: green">2</span>
    <span class="rating-circle" style="color: white; --background-color: blue">3</span>
    <dl>
      <dt><strong>in chrome-pdf</strong></dt>
      <dd>you will see strange artifact lines appearing, they change depending on the <em>scale</em> which you can edit in the chrome pdf settings tab</dd>
      <dt><strong>in html & chrome-image</strong></dt>
      <dd>everything looks smooth and square</dd>
    </dl>
  </body>
</html>`;

// just to verify that the html view is correct
fs.writeFileSync(HTML_PATH, renderedContent);

const page = await browser.newPage();

await page.setViewport(VIEWPORT_OPTIONS);
await page.setContent(renderedContent);
await page.pdf(PDF_OPTIONS);
await page.screenshot(IMAGE_OPTIONS);

await browser.close();
```


### Background

Coming over from https://github.com/jsreport/jsreport/issues/1168 I kindly want to raise a bug since I can eliminate the jsreport dependency and only reproduce it using puppeteer.

### Expectation

The background should look the same (checkerboard with gray squares) no matter the output format. The rating circles should have a perfect circle with a centered label in it.

### Reality

In HTML and in the screenshot png everything looks as expected, but the PDF looks crooked.
The rectangles get weird and also it seems like centered objects to not get subpixel precision centering. Notice the .rating-circles in html and png their content is perfectly centered, in the pdf it gets drawn to the bottom left around 1px.

### Puppeteer configuration file (if used)

_No response_

### Puppeteer version

23.3.0

### Node version

v20.17.0

### Package manager

npm

### Package manager version

10.8.3

### Operating system

Windows