fix(engine): use getBoundingClientRect for video frame replacement geometry

Fixes #1009 — portrait (1080×1920) video compositions show a bottom gap
for the first ~37 seconds when rendered with pooled browsers on macOS.

Root cause: injectVideoFramesBatch() positioned the replacement <img>
using video.offsetWidth/offsetHeight/offsetLeft/offsetTop. On macOS
Chrome with pooled browsers (enabled in v0.6.11), these offset*
properties can report stale compositor-dependent values before Chrome's
video decoder fully settles, causing the <img> to be sized smaller than
the CSS box.

Fix: use getBoundingClientRect() which always reflects the CSS layout
dimensions regardless of compositor state. Position is computed relative
to offsetParent's rect for correct absolute positioning.

Also adds portrait-video-fullbleed regression test (1080×1920 video with
position:absolute;inset:0) to catch future bottom-edge coverage issues.

Author: miguel-heygen

packages/engine/src/services/screenshotService.ts

@@ -436,22 +436,28 @@ export async function injectVideoFramesBatch(
         // stack vertically — the <img> lands below the video and gets clipped
         // by any overflow:hidden ancestor (e.g., border-radius wrappers).
         //
-        // Apply this after visual style copying so the measured used box is
-        // the final authority for replacement frame geometry.
+        // Use getBoundingClientRect for replacement geometry — it reflects the
+        // CSS layout box reliably across platforms. offset* properties can
+        // report stale or compositor-dependent values on macOS Chrome when the
+        // browser pool shares one process across workers, causing the <img> to
+        // be sized smaller than the CSS box (bottom-gap regression #1009).
         {
           const videoRect = video.getBoundingClientRect();
-          const offsetLeft = Number.isFinite(video.offsetLeft) ? video.offsetLeft : 0;
-          const offsetTop = Number.isFinite(video.offsetTop) ? video.offsetTop : 0;
-          const offsetWidth = video.offsetWidth > 0 ? video.offsetWidth : videoRect.width;
-          const offsetHeight = video.offsetHeight > 0 ? video.offsetHeight : videoRect.height;
+          const parentRect = video.offsetParent
+            ? video.offsetParent.getBoundingClientRect()
+            : { left: 0, top: 0 };
+          const relLeft = Math.round(videoRect.left - parentRect.left);
+          const relTop = Math.round(videoRect.top - parentRect.top);
+          const w = Math.round(videoRect.width);
+          const h = Math.round(videoRect.height);
           img.style.position = "absolute";
           img.style.inset = "auto";
-          img.style.left = `${offsetLeft}px`;
-          img.style.top = `${offsetTop}px`;
+          img.style.left = `${relLeft}px`;
+          img.style.top = `${relTop}px`;
           img.style.right = "auto";
           img.style.bottom = "auto";
-          img.style.width = `${offsetWidth}px`;
-          img.style.height = `${offsetHeight}px`;
+          img.style.width = `${w}px`;
+          img.style.height = `${h}px`;
         }
         img.style.objectFit = computedStyle.objectFit;
         img.style.objectPosition = computedStyle.objectPosition;

packages/producer/tests/portrait-video-fullbleed/meta.json

@@ -0,0 +1,12 @@
+{
+  "name": "Portrait video full-bleed coverage",
+  "description": "Regression for #1009: a 1080×1920 portrait video with position:absolute;inset:0 must cover the full canvas bottom edge. The video frame replacement <img> must use getBoundingClientRect geometry, not offset* properties.",
+  "tags": ["portrait", "video", "regression", "fullbleed"],
+  "minPsnr": 25,
+  "maxFrameFailures": 5,
+  "minAudioCorrelation": 0.0,
+  "maxAudioLagWindows": 120,
+  "renderConfig": {
+    "fps": 30
+  }
+}

packages/producer/tests/portrait-video-fullbleed/output/compiled.html

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:436b95c2d4cd370b2e782eca8ec09341cdc1af4a1780184d3871d1bf0ffbd460
+size 320046

packages/producer/tests/portrait-video-fullbleed/output/output.mp4

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1080, height=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: #000; }
+      #main { position: relative; width: 1080px; height: 1920px; overflow: hidden; background: #000; }
+      #bg-video { position: absolute; inset: 0; width: 1080px; height: 1920px; z-index: 0; }
+    </style>
+  </head>
+  <body>
+    <div id="main" data-composition-id="main" data-start="0" data-duration="10" data-width="1080" data-height="1920">
+      <video id="bg-video" class="clip" data-start="0" data-duration="10" data-track-index="0" muted playsinline src="assets/video/sample.mp4"></video>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["main"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>