diff --git a/tests/library/screenshot.spec.ts b/tests/library/screenshot.spec.ts
index a99c3f7e70..e8bdac3313 100644
--- a/tests/library/screenshot.spec.ts
+++ b/tests/library/screenshot.spec.ts
@@ -444,4 +444,53 @@ browserTest.describe('element screenshot', () => {
     expect(screenshot).toMatchSnapshot('element-larger-than-viewport-dsf-css-size.png');
     await context.close();
   });
+
+  browserTest('page screenshot should capture css transform with device pixels', async function({ browser, browserName }) {
+    browserTest.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/26447' });
+    browserTest.fixme(browserName === 'webkit');
+    const context = await browser.newContext({
+      viewport: { width: 500, height: 500 },
+      deviceScaleFactor: 3,
+    });
+    const page = await context.newPage();
+    await page.setContent(`
+      <style>
+      .container {
+        width: 150px;
+        height: 150px;
+        margin: 75px 0 0 75px;
+        border: none;
+      }
+
+      .cube {
+        width: 100%;
+        height: 100%;
+        perspective: 550px;
+        perspective-origin: 150% 150%;
+      }
+
+      .face {
+        display: block;
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        border: none;
+      }
+
+      .right {
+        background: rgba(196, 0, 0, 0.7);
+        transform: rotateY(70deg);
+      }
+
+      </style>
+      <div class="container">
+        <div class="cube showbf">
+          <div class="face right"></div>
+        </div>
+      </div>
+    `);
+
+    await expect(page).toHaveScreenshot({ scale: 'device' });
+    await context.close();
+  });
 });
diff --git a/tests/library/screenshot.spec.ts-snapshots/element-screenshot-page-screenshot-should-capture-css-transform-with-device-pixels-1-chromium.png b/tests/library/screenshot.spec.ts-snapshots/element-screenshot-page-screenshot-should-capture-css-transform-with-device-pixels-1-chromium.png
new file mode 100644
index 0000000000..39823a32db
Binary files /dev/null and b/tests/library/screenshot.spec.ts-snapshots/element-screenshot-page-screenshot-should-capture-css-transform-with-device-pixels-1-chromium.png differ
diff --git a/tests/library/screenshot.spec.ts-snapshots/element-screenshot-page-screenshot-should-capture-css-transform-with-device-pixels-1-firefox.png b/tests/library/screenshot.spec.ts-snapshots/element-screenshot-page-screenshot-should-capture-css-transform-with-device-pixels-1-firefox.png
new file mode 100644
index 0000000000..a9fab7d00e
Binary files /dev/null and b/tests/library/screenshot.spec.ts-snapshots/element-screenshot-page-screenshot-should-capture-css-transform-with-device-pixels-1-firefox.png differ
diff --git a/tests/page/page-screenshot.spec.ts b/tests/page/page-screenshot.spec.ts
index 7ee3900896..bea03d1d30 100644
--- a/tests/page/page-screenshot.spec.ts
+++ b/tests/page/page-screenshot.spec.ts
@@ -840,3 +840,47 @@ it('should throw if screenshot size is too large', async ({ page, browserName, i
       expect(exception.message).toContain('Cannot take screenshot larger than 32767');
   }
 });
+
+it('page screenshot should capture css transform', async function({ page, browserName, isElectron }) {
+  it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/26447' });
+  it.fixme(browserName === 'webkit');
+  it.fixme(isElectron, 'Returns screenshot of a different size.');
+  await page.setContent(`
+    <style>
+    .container {
+      width: 150px;
+      height: 150px;
+      margin: 75px 0 0 75px;
+      border: none;
+    }
+
+    .cube {
+      width: 100%;
+      height: 100%;
+      perspective: 550px;
+      perspective-origin: 150% 150%;
+    }
+
+    .face {
+      display: block;
+      position: absolute;
+      width: 100px;
+      height: 100px;
+      border: none;
+    }
+
+    .right {
+      background: rgba(196, 0, 0, 0.7);
+      transform: rotateY(70deg);
+    }
+
+    </style>
+    <div class="container">
+      <div class="cube showbf">
+        <div class="face right"></div>
+      </div>
+    </div>
+  `);
+
+  await expect(page).toHaveScreenshot();
+});
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/page-screenshot-should-capture-css-transform-1-chromium.png b/tests/page/page-screenshot.spec.ts-snapshots/page-screenshot-should-capture-css-transform-1-chromium.png
new file mode 100644
index 0000000000..d29a2b4ab2
Binary files /dev/null and b/tests/page/page-screenshot.spec.ts-snapshots/page-screenshot-should-capture-css-transform-1-chromium.png differ
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/page-screenshot-should-capture-css-transform-1-firefox.png b/tests/page/page-screenshot.spec.ts-snapshots/page-screenshot-should-capture-css-transform-1-firefox.png
new file mode 100644
index 0000000000..1010c4fd45
Binary files /dev/null and b/tests/page/page-screenshot.spec.ts-snapshots/page-screenshot-should-capture-css-transform-1-firefox.png differ