fix(engine): keep offsetLeft/offsetTop for position, only use getBoundingClientRect for size

Reverts the position change from 617f861 that broke style-7/8/10-prod
baselines. The getBoundingClientRect-based relative positioning
(videoRect.left - parentRect.left) doesn't match offsetLeft in nested
compositions with transforms, borders, or padding on ancestors.

Fix: use getBoundingClientRect only for width/height (fixes #1009 bottom
gap), keep offsetLeft/offsetTop for position (correct for nested comps).
Restores the 3 original baselines that were incorrectly regenerated.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: miguel-heygen

packages/engine/src/services/screenshotService.ts

@@ -436,24 +436,20 @@ 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).
         //
-        // 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).
+        // Size: getBoundingClientRect reflects the CSS layout box reliably.
+        // offset* can report stale values on macOS Chrome with pooled browsers
+        // (bottom-gap regression #1009).
+        // Position: keep offsetLeft/offsetTop — they give the correct position
+        // relative to offsetParent in nested compositions where
+        // getBoundingClientRect-based math breaks due to transforms/borders.
         {
           const videoRect = video.getBoundingClientRect();
-          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);
+          const w = Math.round(videoRect.width) || video.offsetWidth;
+          const h = Math.round(videoRect.height) || video.offsetHeight;
           img.style.position = "absolute";
           img.style.inset = "auto";
-          img.style.left = `${relLeft}px`;
-          img.style.top = `${relTop}px`;
+          img.style.left = `${video.offsetLeft}px`;
+          img.style.top = `${video.offsetTop}px`;
           img.style.right = "auto";
           img.style.bottom = "auto";
           img.style.width = `${w}px`;

packages/producer/tests/style-10-prod/output/compiled.html

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d25147399c18dcabba31b7ac79094a954f1d9fc8c8899aa769f2c28a70fd3caa
-size 11406696
+oid sha256:f09f5074edd21e2431171bfc7c7e9ed1ca6e5104a347721ac13ecadb625fe10a
+size 4884784

packages/producer/tests/style-10-prod/output/output.mp4

@@ -198,7 +198,7 @@
   font-style: normal;
   font-weight: 800;
   font-display: block;
-}</style><style data-hyperframes-text-rendering="true">html,body,*{text-rendering:geometricPrecision}</style>
+}</style>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Editor Agent - Velvet Standard</title>

packages/producer/tests/style-7-prod/output/compiled.html

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b1e2ce13f6479ee7db821bb5e10c1de32e6749a23bf0df6690a34e93c2f598ab
-size 5530424
+oid sha256:3f65d173a65ebf2702818121b58d57b405c96762916c75a90e58b9b058bab7cc
+size 12305451

packages/producer/tests/style-7-prod/output/output.mp4

@@ -262,7 +262,7 @@
   font-style: normal;
   font-weight: 900;
   font-display: block;
-}</style><style data-hyperframes-text-rendering="true">html,body,*{text-rendering:geometricPrecision}</style>
+}</style>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Editor Agent - Henryk Tomaszewski Style</title>

packages/producer/tests/style-8-prod/output/compiled.html

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3274cddfb6d8c42b3d18675261d1e90ac37b483ac237ee4c28437be6468b94c1
-size 13138233
+oid sha256:a005acdf38870cea1e4bb2e870bbd662ebb26dba60539481cda77a4cb719f42e
+size 14507933