@remotion/web-renderer 4.0.451 → 4.0.453

package/dist/esm/index.mjs

@@ -2059,6 +2059,8 @@ var calculateTransforms = ({
   let elementComputedStyle = null;
   let maskImageInfo = null;
   while (parent) {
+    const originalTransition = parent.style.transition;
+    parent.style.transition = "none";
     const computedStyle = getComputedStyle(parent);
     if (parent === element) {
       elementComputedStyle = computedStyle;
@@ -2101,6 +2103,12 @@ var calculateTransforms = ({
         parentRef.style.transform = transform;
         parentRef.style.scale = scale;
         parentRef.style.rotate = rotate;
+        parentRef.style.transition = originalTransition;
+      });
+    } else {
+      const parentRef = parent;
+      toReset.push(() => {
+        parentRef.style.transition = originalTransition;
       });
     }
     if (parent === rootElement) {
@@ -2688,9 +2696,10 @@ var drawBackground = async ({
       const originalWebkitBackgroundClip = element.style.webkitBackgroundClip;
       element.style.backgroundClip = "initial";
       element.style.webkitBackgroundClip = "initial";
+      const textLayerCutout = new DOMRect(boundingRect.left + parentOffsetLeft, boundingRect.top + parentOffsetTop, boundingRect.width, boundingRect.height);
       const onlyBackgroundClipText = await createLayer({
         element,
-        cutout: new DOMRect(boundingRect.left + parentOffsetLeft, boundingRect.top + parentOffsetTop, boundingRect.width, boundingRect.height),
+        cutout: textLayerCutout,
         logLevel,
         internalState,
         scale,
@@ -3425,6 +3434,30 @@ function skipToNextNonDescendant(treeWalker) {
 }
 
 // src/get-biggest-bounding-client-rect.ts
+var getTextOverflowForLineHeight = (computedStyle) => {
+  const { lineHeight } = computedStyle;
+  const fontSize = parseFloat(computedStyle.fontSize);
+  if (!fontSize || isNaN(fontSize)) {
+    return { top: 0, bottom: 0 };
+  }
+  let lineHeightValue;
+  if (lineHeight === "normal") {
+    return { top: 0, bottom: 0 };
+  }
+  if (lineHeight.endsWith("px")) {
+    lineHeightValue = parseFloat(lineHeight) / fontSize;
+  } else {
+    lineHeightValue = parseFloat(lineHeight);
+    if (lineHeight.endsWith("%")) {
+      lineHeightValue /= 100;
+    }
+  }
+  if (isNaN(lineHeightValue) || lineHeightValue >= 1) {
+    return { top: 0, bottom: 0 };
+  }
+  const overflow = (1 - lineHeightValue) * fontSize;
+  return { top: overflow, bottom: overflow };
+};
 var getBiggestBoundingClientRect = (element) => {
   const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
   let mostLeft = Infinity;
@@ -3436,6 +3469,7 @@ var getBiggestBoundingClientRect = (element) => {
     const outlineWidth = parseOutlineWidth(computedStyle.outlineWidth);
     const outlineOffset = parseOutlineOffset(computedStyle.outlineOffset);
     const rect = treeWalker.currentNode.getBoundingClientRect();
+    const textOverflow = getTextOverflowForLineHeight(computedStyle);
     const shadows = parseBoxShadow(computedStyle.boxShadow);
     let shadowLeft = 0;
     let shadowRight = 0;
@@ -3450,9 +3484,9 @@ var getBiggestBoundingClientRect = (element) => {
       }
     }
     mostLeft = Math.min(mostLeft, rect.left - outlineOffset - outlineWidth - shadowLeft);
-    mostTop = Math.min(mostTop, rect.top - outlineOffset - outlineWidth - shadowTop);
+    mostTop = Math.min(mostTop, rect.top - outlineOffset - outlineWidth - shadowTop - textOverflow.top);
     mostRight = Math.max(mostRight, rect.right + outlineOffset + outlineWidth + shadowRight);
-    mostBottom = Math.max(mostBottom, rect.bottom + outlineOffset + outlineWidth + shadowBottom);
+    mostBottom = Math.max(mostBottom, rect.bottom + outlineOffset + outlineWidth + shadowBottom + textOverflow.bottom);
     if (computedStyle.overflow === "hidden") {
       if (!skipToNextNonDescendant(treeWalker)) {
         break;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.451",
+	"version": "4.0.453",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -22,19 +22,19 @@
 		"@mediabunny/mp3-encoder": "1.39.2",
 		"@mediabunny/aac-encoder": "1.39.2",
 		"@mediabunny/flac-encoder": "1.39.2",
-		"@remotion/licensing": "4.0.451",
-		"remotion": "4.0.451",
+		"@remotion/licensing": "4.0.453",
+		"remotion": "4.0.453",
 		"mediabunny": "1.39.2"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.451",
-		"@remotion/paths": "4.0.451",
-		"@remotion/player": "4.0.451",
-		"@remotion/media": "4.0.451",
-		"@remotion/shapes": "4.0.451",
-		"@remotion/three": "4.0.451",
-		"@remotion/transitions": "4.0.451",
+		"@remotion/eslint-config-internal": "4.0.453",
+		"@remotion/paths": "4.0.453",
+		"@remotion/player": "4.0.453",
+		"@remotion/media": "4.0.453",
+		"@remotion/shapes": "4.0.453",
+		"@remotion/three": "4.0.453",
+		"@remotion/transitions": "4.0.453",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",

package/dist/drawing/handle-filter.d.ts

@@ -1 +0,0 @@
-export declare const getPrecomposeRectForFilter: (element: HTMLElement | SVGElement) => DOMRect;