fix(engine): always pass clip to Page.captureScreenshot

Without an explicit clip, Chrome can resolve replaced-element sizing
differently at dpr=1 when full-bleed absolute videos interact with
overlay layers — producing anisotropic frame stretching on some
compositor paths. Always passing clip with scale=dpr (including 1)
ensures geometry is locked to the measured viewport dimensions.

Credit: brian-t-allen (#837)

Author: miguel-heygen

packages/engine/src/services/screenshotService.test.ts

@@ -25,7 +25,7 @@ describe("pageScreenshotCapture supersample plumbing", () => {
   const ONE_PIXEL_PNG_B64 =
     "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=";
 
-  it("omits `clip` when deviceScaleFactor is undefined (default 1)", async () => {
+  it("passes `clip` with scale 1 when deviceScaleFactor is undefined (default 1)", async () => {
     const send = vi.fn().mockResolvedValue({ data: ONE_PIXEL_PNG_B64 });
     const page = makeFakePageWithCdp(send);
 
@@ -39,11 +39,13 @@ describe("pageScreenshotCapture supersample plumbing", () => {
 
     expect(send).toHaveBeenCalledWith(
       "Page.captureScreenshot",
-      expect.not.objectContaining({ clip: expect.anything() }),
+      expect.objectContaining({
+        clip: { x: 0, y: 0, width: 1920, height: 1080, scale: 1 },
+      }),
     );
   });
 
-  it("omits `clip` when deviceScaleFactor is exactly 1", async () => {
+  it("passes `clip` with scale 1 when deviceScaleFactor is exactly 1", async () => {
     const send = vi.fn().mockResolvedValue({ data: ONE_PIXEL_PNG_B64 });
     const page = makeFakePageWithCdp(send);
 
@@ -55,8 +57,8 @@ describe("pageScreenshotCapture supersample plumbing", () => {
       deviceScaleFactor: 1,
     });
 
-    const params = send.mock.calls[0]?.[1] as { clip?: unknown };
-    expect(params.clip).toBeUndefined();
+    const params = send.mock.calls[0]?.[1] as { clip?: { scale: number } };
+    expect(params.clip).toEqual({ x: 0, y: 0, width: 1920, height: 1080, scale: 1 });
   });
 
   it("passes `clip` with `scale = dpr` when deviceScaleFactor > 1 (the supersample contract)", async () => {

packages/engine/src/services/screenshotService.ts

@@ -130,19 +130,14 @@ export async function pageScreenshotCapture(page: Page, options: CaptureOptions)
   const client = await getCdpSession(page);
   const isPng = options.format === "png";
   const dpr = options.deviceScaleFactor ?? 1;
-  // When supersampling, pass an explicit clip with `scale` so Chrome emits a
-  // screenshot at device-pixel dimensions (`width × height × dpr`). Without
-  // this, `Page.captureScreenshot` returns at CSS dimensions regardless of
-  // the viewport's deviceScaleFactor.
-  const clip =
-    dpr > 1 ? { x: 0, y: 0, width: options.width, height: options.height, scale: dpr } : undefined;
+  const clip = { x: 0, y: 0, width: options.width, height: options.height, scale: dpr };
   const result = await client.send("Page.captureScreenshot", {
     format: isPng ? "png" : "jpeg",
     quality: isPng ? undefined : (options.quality ?? 80),
     fromSurface: true,
     captureBeyondViewport: false,
     optimizeForSpeed: !isPng,
-    ...(clip ? { clip } : {}),
+    clip,
   });
   return Buffer.from(result.data, "base64");
 }