@remotion/web-renderer 4.0.395 → 4.0.396

package/dist/esm/index.mjs

@@ -382,6 +382,23 @@ var getDefaultAudioEncodingConfig = async () => {
   return null;
 };
 
+// src/internal-state.ts
+var makeInternalState = () => {
+  let drawn3dPixels = 0;
+  let drawn3dTextures = 0;
+  return {
+    getDrawn3dPixels: () => drawn3dPixels,
+    getDrawn3dTextures: () => drawn3dTextures,
+    add3DTransform: ({
+      canvasWidth,
+      canvasHeight
+    }) => {
+      drawn3dPixels += canvasWidth * canvasHeight;
+      drawn3dTextures++;
+    }
+  };
+};
+
 // src/mediabunny-mappings.ts
 import {
   Mp4OutputFormat,
@@ -583,27 +600,18 @@ var drawDomElement = (node) => {
   return domDrawFn;
 };
 
-// src/drawing/draw-element-to-canvas.ts
-import { Internals as Internals4 } from "remotion";
-
-// src/get-biggest-bounding-client-rect.ts
-var getBiggestBoundingClientRect = (element) => {
-  const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
-  let mostLeft = Infinity;
-  let mostTop = Infinity;
-  let mostRight = -Infinity;
-  let mostBottom = -Infinity;
-  while (true) {
-    const rect = treeWalker.currentNode.getBoundingClientRect();
-    mostLeft = Math.min(mostLeft, rect.left);
-    mostTop = Math.min(mostTop, rect.top);
-    mostRight = Math.max(mostRight, rect.right);
-    mostBottom = Math.max(mostBottom, rect.bottom);
-    if (!treeWalker.nextNode()) {
-      break;
-    }
-  }
-  return new DOMRect(mostLeft, mostTop, mostRight - mostLeft, mostBottom - mostTop);
+// src/drawing/has-transform.ts
+var hasTransformCssValue = (style) => {
+  return style.transform !== "none" && style.transform !== "";
+};
+var hasRotateCssValue = (style) => {
+  return style.rotate !== "none" && style.rotate !== "";
+};
+var hasScaleCssValue = (style) => {
+  return style.scale !== "none" && style.scale !== "";
+};
+var hasAnyTransformCssValue = (style) => {
+  return hasTransformCssValue(style) || hasRotateCssValue(style) || hasScaleCssValue(style);
 };
 
 // src/drawing/parse-transform-origin.ts
@@ -625,30 +633,33 @@ var getInternalTransformOrigin = (transform) => {
   };
   return origin;
 };
-var getGlobalTransformOrigin = (transform) => {
+var getGlobalTransformOrigin = ({
+  transform,
+  offsetLeft,
+  offsetTop
+}) => {
   const { x: originX, y: originY } = getInternalTransformOrigin(transform);
   return {
-    x: originX + transform.boundingClientRect.left,
-    y: originY + transform.boundingClientRect.top
+    x: originX + transform.boundingClientRect.left - offsetLeft,
+    y: originY + transform.boundingClientRect.top - offsetTop
   };
 };
-var calculateTransforms = (element) => {
+var calculateTransforms = ({
+  element,
+  offsetLeft,
+  offsetTop
+}) => {
   let parent = element;
   const transforms = [];
   const toReset = [];
-  let opacity = 1;
   let elementComputedStyle = null;
   while (parent) {
     const computedStyle = getComputedStyle(parent);
-    const parentOpacity = computedStyle.opacity;
-    if (parentOpacity && parentOpacity !== "") {
-      opacity *= parseFloat(parentOpacity);
-    }
     if (parent === element) {
       elementComputedStyle = computedStyle;
     }
-    if (computedStyle.transform && computedStyle.transform !== "none" || parent === element) {
-      const toParse = computedStyle.transform === "none" || computedStyle.transform === "" ? undefined : computedStyle.transform;
+    if (hasAnyTransformCssValue(computedStyle) || parent === element) {
+      const toParse = hasTransformCssValue(computedStyle) ? computedStyle.transform : undefined;
       const matrix = new DOMMatrix(toParse);
       const { transform, scale, rotate } = parent.style;
       const additionalMatrices = [];
@@ -663,7 +674,7 @@ var calculateTransforms = (element) => {
       parent.style.scale = "none";
       parent.style.rotate = "none";
       transforms.push({
-        rect: parent,
+        element: parent,
         transformOrigin: computedStyle.transformOrigin,
         boundingClientRect: null,
         matrices: additionalMatrices
@@ -678,17 +689,18 @@ var calculateTransforms = (element) => {
     parent = parent.parentElement;
   }
   for (const transform of transforms) {
-    transform.boundingClientRect = transform.rect.getBoundingClientRect();
+    transform.boundingClientRect = transform.element.getBoundingClientRect();
   }
   const dimensions = transforms[0].boundingClientRect;
   const nativeTransformOrigin = getInternalTransformOrigin(transforms[0]);
   const totalMatrix = new DOMMatrix;
   for (const transform of transforms.slice().reverse()) {
-    if (!transform.boundingClientRect) {
-      throw new Error("Bounding client rect not found");
-    }
     for (const matrix of transform.matrices) {
-      const globalTransformOrigin = getGlobalTransformOrigin(transform);
+      const globalTransformOrigin = getGlobalTransformOrigin({
+        transform,
+        offsetLeft,
+        offsetTop
+      });
       const transformMatrix = new DOMMatrix().translate(globalTransformOrigin.x, globalTransformOrigin.y).multiply(matrix).translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
       totalMatrix.multiplySelf(transformMatrix);
     }
@@ -705,8 +717,8 @@ var calculateTransforms = (element) => {
       }
     },
     nativeTransformOrigin,
-    opacity,
-    computedStyle: elementComputedStyle
+    computedStyle: elementComputedStyle,
+    opacity: elementComputedStyle.opacity && elementComputedStyle.opacity !== "" ? parseFloat(elementComputedStyle.opacity) : 1
   };
 };
 
@@ -811,33 +823,31 @@ function parseBorderRadius({
 }
 function setBorderRadius({
   ctx,
-  x,
-  y,
-  width,
-  height,
-  borderRadius
+  rect,
+  borderRadius,
+  forceClipEvenWhenZero = false
 }) {
-  if (borderRadius.topLeft.horizontal === 0 && borderRadius.topLeft.vertical === 0 && borderRadius.topRight.horizontal === 0 && borderRadius.topRight.vertical === 0 && borderRadius.bottomRight.horizontal === 0 && borderRadius.bottomRight.vertical === 0 && borderRadius.bottomLeft.horizontal === 0 && borderRadius.bottomLeft.vertical === 0) {
+  if (borderRadius.topLeft.horizontal === 0 && borderRadius.topLeft.vertical === 0 && borderRadius.topRight.horizontal === 0 && borderRadius.topRight.vertical === 0 && borderRadius.bottomRight.horizontal === 0 && borderRadius.bottomRight.vertical === 0 && borderRadius.bottomLeft.horizontal === 0 && borderRadius.bottomLeft.vertical === 0 && !forceClipEvenWhenZero) {
     return () => {};
   }
   ctx.save();
   ctx.beginPath();
-  ctx.moveTo(x + borderRadius.topLeft.horizontal, y);
-  ctx.lineTo(x + width - borderRadius.topRight.horizontal, y);
+  ctx.moveTo(rect.left + borderRadius.topLeft.horizontal, rect.top);
+  ctx.lineTo(rect.left + rect.width - borderRadius.topRight.horizontal, rect.top);
   if (borderRadius.topRight.horizontal > 0 || borderRadius.topRight.vertical > 0) {
-    ctx.ellipse(x + width - borderRadius.topRight.horizontal, y + borderRadius.topRight.vertical, borderRadius.topRight.horizontal, borderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
+    ctx.ellipse(rect.left + rect.width - borderRadius.topRight.horizontal, rect.top + borderRadius.topRight.vertical, borderRadius.topRight.horizontal, borderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
   }
-  ctx.lineTo(x + width, y + height - borderRadius.bottomRight.vertical);
+  ctx.lineTo(rect.left + rect.width, rect.top + rect.height - borderRadius.bottomRight.vertical);
   if (borderRadius.bottomRight.horizontal > 0 || borderRadius.bottomRight.vertical > 0) {
-    ctx.ellipse(x + width - borderRadius.bottomRight.horizontal, y + height - borderRadius.bottomRight.vertical, borderRadius.bottomRight.horizontal, borderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
+    ctx.ellipse(rect.left + rect.width - borderRadius.bottomRight.horizontal, rect.top + rect.height - borderRadius.bottomRight.vertical, borderRadius.bottomRight.horizontal, borderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
   }
-  ctx.lineTo(x + borderRadius.bottomLeft.horizontal, y + height);
+  ctx.lineTo(rect.left + borderRadius.bottomLeft.horizontal, rect.top + rect.height);
   if (borderRadius.bottomLeft.horizontal > 0 || borderRadius.bottomLeft.vertical > 0) {
-    ctx.ellipse(x + borderRadius.bottomLeft.horizontal, y + height - borderRadius.bottomLeft.vertical, borderRadius.bottomLeft.horizontal, borderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
+    ctx.ellipse(rect.left + borderRadius.bottomLeft.horizontal, rect.top + rect.height - borderRadius.bottomLeft.vertical, borderRadius.bottomLeft.horizontal, borderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
   }
-  ctx.lineTo(x, y + borderRadius.topLeft.vertical);
+  ctx.lineTo(rect.left, rect.top + borderRadius.topLeft.vertical);
   if (borderRadius.topLeft.horizontal > 0 || borderRadius.topLeft.vertical > 0) {
-    ctx.ellipse(x + borderRadius.topLeft.horizontal, y + borderRadius.topLeft.vertical, borderRadius.topLeft.horizontal, borderRadius.topLeft.vertical, 0, Math.PI, Math.PI * 3 / 2);
+    ctx.ellipse(rect.left + borderRadius.topLeft.horizontal, rect.top + borderRadius.topLeft.vertical, borderRadius.topLeft.horizontal, borderRadius.topLeft.vertical, 0, Math.PI, Math.PI * 3 / 2);
   }
   ctx.closePath();
   ctx.clip();
@@ -1059,10 +1069,7 @@ var drawUniformBorder = ({
 };
 var drawBorder = ({
   ctx,
-  x,
-  y,
-  width,
-  height,
+  rect,
   borderRadius,
   computedStyle
 }) => {
@@ -1078,10 +1085,10 @@ var drawBorder = ({
   if (allSidesEqual) {
     drawUniformBorder({
       ctx,
-      x,
-      y,
-      width,
-      height,
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
       borderRadius,
       borderWidth: borders.top.width,
       borderColor: borders.top.color,
@@ -1091,10 +1098,10 @@ var drawBorder = ({
     drawCorner({
       ctx,
       corner: "topLeft",
-      x,
-      y,
-      width,
-      height,
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
       borderRadius,
       topBorder: borders.top,
       rightBorder: borders.right,
@@ -1104,10 +1111,10 @@ var drawBorder = ({
     drawCorner({
       ctx,
       corner: "topRight",
-      x,
-      y,
-      width,
-      height,
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
       borderRadius,
       topBorder: borders.top,
       rightBorder: borders.right,
@@ -1117,10 +1124,10 @@ var drawBorder = ({
     drawCorner({
       ctx,
       corner: "bottomRight",
-      x,
-      y,
-      width,
-      height,
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
       borderRadius,
       topBorder: borders.top,
       rightBorder: borders.right,
@@ -1130,10 +1137,10 @@ var drawBorder = ({
     drawCorner({
       ctx,
       corner: "bottomLeft",
-      x,
-      y,
-      width,
-      height,
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
       borderRadius,
       topBorder: borders.top,
       rightBorder: borders.right,
@@ -1143,40 +1150,40 @@ var drawBorder = ({
     drawBorderSide({
       ctx,
       side: "top",
-      x,
-      y,
-      width,
-      height,
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
       borderRadius,
       borderProperties: borders.top
     });
     drawBorderSide({
       ctx,
       side: "right",
-      x,
-      y,
-      width,
-      height,
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
       borderRadius,
       borderProperties: borders.right
     });
     drawBorderSide({
       ctx,
       side: "bottom",
-      x,
-      y,
-      width,
-      height,
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
       borderRadius,
       borderProperties: borders.bottom
     });
     drawBorderSide({
       ctx,
       side: "left",
-      x,
-      y,
-      width,
-      height,
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
       borderRadius,
       borderProperties: borders.left
     });
@@ -1186,6 +1193,90 @@ var drawBorder = ({
   ctx.setLineDash(originalLineDash);
 };
 
+// src/drawing/draw-outline.ts
+var parseOutlineWidth = (value) => {
+  return parseFloat(value) || 0;
+};
+var parseOutlineOffset = (value) => {
+  return parseFloat(value) || 0;
+};
+var getLineDashPattern2 = (style, width) => {
+  if (style === "dashed") {
+    return [width * 2, width];
+  }
+  if (style === "dotted") {
+    return [width, width];
+  }
+  return [];
+};
+var drawOutline = ({
+  ctx,
+  rect,
+  borderRadius,
+  computedStyle
+}) => {
+  const outlineWidth = parseOutlineWidth(computedStyle.outlineWidth);
+  const { outlineStyle } = computedStyle;
+  const outlineColor = computedStyle.outlineColor || "black";
+  const outlineOffset = parseOutlineOffset(computedStyle.outlineOffset);
+  if (outlineWidth <= 0 || outlineStyle === "none" || outlineStyle === "hidden") {
+    return;
+  }
+  const originalStrokeStyle = ctx.strokeStyle;
+  const originalLineWidth = ctx.lineWidth;
+  const originalLineDash = ctx.getLineDash();
+  ctx.beginPath();
+  ctx.strokeStyle = outlineColor;
+  ctx.lineWidth = outlineWidth;
+  ctx.setLineDash(getLineDashPattern2(outlineStyle, outlineWidth));
+  const halfWidth = outlineWidth / 2;
+  const offset = outlineOffset + halfWidth;
+  const outlineX = rect.left - offset;
+  const outlineY = rect.top - offset;
+  const outlineW = rect.width + offset * 2;
+  const outlineH = rect.height + offset * 2;
+  const adjustedBorderRadius = {
+    topLeft: {
+      horizontal: borderRadius.topLeft.horizontal === 0 ? 0 : Math.max(0, borderRadius.topLeft.horizontal + offset),
+      vertical: borderRadius.topLeft.vertical === 0 ? 0 : Math.max(0, borderRadius.topLeft.vertical + offset)
+    },
+    topRight: {
+      horizontal: borderRadius.topRight.horizontal === 0 ? 0 : Math.max(0, borderRadius.topRight.horizontal + offset),
+      vertical: borderRadius.topRight.vertical === 0 ? 0 : Math.max(0, borderRadius.topRight.vertical + offset)
+    },
+    bottomRight: {
+      horizontal: borderRadius.bottomRight.horizontal === 0 ? 0 : Math.max(0, borderRadius.bottomRight.horizontal + offset),
+      vertical: borderRadius.bottomRight.vertical === 0 ? 0 : Math.max(0, borderRadius.bottomRight.vertical + offset)
+    },
+    bottomLeft: {
+      horizontal: borderRadius.bottomLeft.horizontal === 0 ? 0 : Math.max(0, borderRadius.bottomLeft.horizontal + offset),
+      vertical: borderRadius.bottomLeft.vertical === 0 ? 0 : Math.max(0, borderRadius.bottomLeft.vertical + offset)
+    }
+  };
+  ctx.moveTo(outlineX + adjustedBorderRadius.topLeft.horizontal, outlineY);
+  ctx.lineTo(outlineX + outlineW - adjustedBorderRadius.topRight.horizontal, outlineY);
+  if (adjustedBorderRadius.topRight.horizontal > 0 || adjustedBorderRadius.topRight.vertical > 0) {
+    ctx.ellipse(outlineX + outlineW - adjustedBorderRadius.topRight.horizontal, outlineY + adjustedBorderRadius.topRight.vertical, adjustedBorderRadius.topRight.horizontal, adjustedBorderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
+  }
+  ctx.lineTo(outlineX + outlineW, outlineY + outlineH - adjustedBorderRadius.bottomRight.vertical);
+  if (adjustedBorderRadius.bottomRight.horizontal > 0 || adjustedBorderRadius.bottomRight.vertical > 0) {
+    ctx.ellipse(outlineX + outlineW - adjustedBorderRadius.bottomRight.horizontal, outlineY + outlineH - adjustedBorderRadius.bottomRight.vertical, adjustedBorderRadius.bottomRight.horizontal, adjustedBorderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
+  }
+  ctx.lineTo(outlineX + adjustedBorderRadius.bottomLeft.horizontal, outlineY + outlineH);
+  if (adjustedBorderRadius.bottomLeft.horizontal > 0 || adjustedBorderRadius.bottomLeft.vertical > 0) {
+    ctx.ellipse(outlineX + adjustedBorderRadius.bottomLeft.horizontal, outlineY + outlineH - adjustedBorderRadius.bottomLeft.vertical, adjustedBorderRadius.bottomLeft.horizontal, adjustedBorderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
+  }
+  ctx.lineTo(outlineX, outlineY + adjustedBorderRadius.topLeft.vertical);
+  if (adjustedBorderRadius.topLeft.horizontal > 0 || adjustedBorderRadius.topLeft.vertical > 0) {
+    ctx.ellipse(outlineX + adjustedBorderRadius.topLeft.horizontal, outlineY + adjustedBorderRadius.topLeft.vertical, adjustedBorderRadius.topLeft.horizontal, adjustedBorderRadius.topLeft.vertical, 0, Math.PI, Math.PI * 3 / 2);
+  }
+  ctx.closePath();
+  ctx.stroke();
+  ctx.strokeStyle = originalStrokeStyle;
+  ctx.lineWidth = originalLineWidth;
+  ctx.setLineDash(originalLineDash);
+};
+
 // src/drawing/opacity.ts
 var setOpacity = ({
   ctx,
@@ -1198,6 +1289,24 @@ var setOpacity = ({
   };
 };
 
+// src/drawing/overflow.ts
+var setOverflowHidden = ({
+  ctx,
+  rect,
+  borderRadius,
+  overflowHidden
+}) => {
+  if (!overflowHidden) {
+    return () => {};
+  }
+  return setBorderRadius({
+    ctx,
+    rect,
+    borderRadius,
+    forceClipEvenWhenZero: true
+  });
+};
+
 // src/drawing/transform.ts
 var setTransform = ({
   ctx,
@@ -1211,7 +1320,7 @@ var setTransform = ({
 
 // src/drawing/draw-element.ts
 var drawElement = async ({
-  dimensions,
+  rect,
   computedStyle,
   context,
   draw,
@@ -1221,8 +1330,8 @@ var drawElement = async ({
   const background = computedStyle.backgroundColor;
   const borderRadius = parseBorderRadius({
     borderRadius: computedStyle.borderRadius,
-    width: dimensions.width,
-    height: dimensions.height
+    width: rect.width,
+    height: rect.height
   });
   const finishTransform = setTransform({
     ctx: context,
@@ -1230,11 +1339,9 @@ var drawElement = async ({
   });
   const finishBorderRadius = setBorderRadius({
     ctx: context,
-    x: dimensions.left,
-    y: dimensions.top,
-    width: dimensions.width,
-    height: dimensions.height,
-    borderRadius
+    rect,
+    borderRadius,
+    forceClipEvenWhenZero: false
   });
   const finishOpacity = setOpacity({
     ctx: context,
@@ -1243,24 +1350,142 @@ var drawElement = async ({
   if (background && background !== "transparent" && !(background.startsWith("rgba") && (background.endsWith(", 0)") || background.endsWith(",0")))) {
     const originalFillStyle = context.fillStyle;
     context.fillStyle = background;
-    context.fillRect(dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+    context.fillRect(rect.left, rect.top, rect.width, rect.height);
     context.fillStyle = originalFillStyle;
   }
-  await draw({ dimensions, computedStyle, contextToDraw: context });
+  await draw({ dimensions: rect, computedStyle, contextToDraw: context });
   drawBorder({
     ctx: context,
-    x: dimensions.left,
-    y: dimensions.top,
-    width: dimensions.width,
-    height: dimensions.height,
+    rect,
     borderRadius,
     computedStyle
   });
-  finishOpacity();
   finishBorderRadius();
+  drawOutline({
+    ctx: context,
+    rect,
+    borderRadius,
+    computedStyle
+  });
+  const finishOverflowHidden = setOverflowHidden({
+    ctx: context,
+    rect,
+    borderRadius,
+    overflowHidden: computedStyle.overflow === "hidden"
+  });
   finishTransform();
+  return {
+    cleanupAfterChildren: () => {
+      finishOpacity();
+      finishOverflowHidden();
+    }
+  };
 };
 
+// src/drawing/handle-3d-transform.ts
+import { Internals as Internals4 } from "remotion";
+
+// src/walk-tree.ts
+function skipToNextNonDescendant(treeWalker) {
+  if (treeWalker.nextSibling()) {
+    return true;
+  }
+  while (treeWalker.parentNode()) {
+    if (treeWalker.nextSibling()) {
+      return true;
+    }
+  }
+  return false;
+}
+
+// src/get-biggest-bounding-client-rect.ts
+var getBiggestBoundingClientRect = (element) => {
+  const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
+  let mostLeft = Infinity;
+  let mostTop = Infinity;
+  let mostRight = -Infinity;
+  let mostBottom = -Infinity;
+  while (true) {
+    const computedStyle = getComputedStyle(treeWalker.currentNode);
+    const outlineWidth = parseOutlineWidth(computedStyle.outlineWidth);
+    const outlineOffset = parseOutlineOffset(computedStyle.outlineOffset);
+    const rect = treeWalker.currentNode.getBoundingClientRect();
+    mostLeft = Math.min(mostLeft, rect.left - outlineOffset - outlineWidth);
+    mostTop = Math.min(mostTop, rect.top - outlineOffset - outlineWidth);
+    mostRight = Math.max(mostRight, rect.right + outlineOffset + outlineWidth);
+    mostBottom = Math.max(mostBottom, rect.bottom + outlineOffset + outlineWidth);
+    if (computedStyle.overflow === "hidden") {
+      if (!skipToNextNonDescendant(treeWalker)) {
+        break;
+      }
+    }
+    if (!treeWalker.nextNode()) {
+      break;
+    }
+  }
+  return new DOMRect(mostLeft, mostTop, mostRight - mostLeft, mostBottom - mostTop);
+};
+
+// src/drawing/clamp-rect-to-parent-bounds.ts
+var getNarrowerRect = ({
+  firstRect,
+  secondRect
+}) => {
+  const left = Math.max(firstRect.left, secondRect.left);
+  const top = Math.max(firstRect.top, secondRect.top);
+  const bottom = Math.min(firstRect.bottom, secondRect.bottom);
+  const right = Math.min(firstRect.right, secondRect.right);
+  return new DOMRect(left, top, right - left, bottom - top);
+};
+
+// src/drawing/get-pretransform-rect.ts
+function getPreTransformRect(targetRect, matrix) {
+  const origin = new DOMPoint(0, 0).matrixTransform(matrix);
+  const unitX = new DOMPoint(1, 0).matrixTransform(matrix);
+  const unitY = new DOMPoint(0, 1).matrixTransform(matrix);
+  const basisX = { x: unitX.x - origin.x, y: unitX.y - origin.y };
+  const basisY = { x: unitY.x - origin.x, y: unitY.y - origin.y };
+  const effective2D = new DOMMatrix([
+    basisX.x,
+    basisX.y,
+    basisY.x,
+    basisY.y,
+    origin.x,
+    origin.y
+  ]);
+  const inverse2D = effective2D.inverse();
+  const corners = [
+    new DOMPoint(targetRect.x, targetRect.y),
+    new DOMPoint(targetRect.x + targetRect.width, targetRect.y),
+    new DOMPoint(targetRect.x + targetRect.width, targetRect.y + targetRect.height),
+    new DOMPoint(targetRect.x, targetRect.y + targetRect.height)
+  ];
+  const transformedCorners = corners.map((c) => c.matrixTransform(inverse2D));
+  const xs = transformedCorners.map((p) => p.x);
+  const ys = transformedCorners.map((p) => p.y);
+  return new DOMRect(Math.min(...xs), Math.min(...ys), Math.max(...xs) - Math.min(...xs), Math.max(...ys) - Math.min(...ys));
+}
+
+// src/drawing/transform-rect-with-matrix.ts
+function transformDOMRect({
+  rect,
+  matrix
+}) {
+  const topLeft = new DOMPointReadOnly(rect.left, rect.top);
+  const topRight = new DOMPointReadOnly(rect.right, rect.top);
+  const bottomLeft = new DOMPointReadOnly(rect.left, rect.bottom);
+  const bottomRight = new DOMPointReadOnly(rect.right, rect.bottom);
+  const transformedTopLeft = topLeft.matrixTransform(matrix);
+  const transformedTopRight = topRight.matrixTransform(matrix);
+  const transformedBottomLeft = bottomLeft.matrixTransform(matrix);
+  const transformedBottomRight = bottomRight.matrixTransform(matrix);
+  const minX = Math.min(transformedTopLeft.x / transformedTopLeft.w, transformedTopRight.x / transformedTopRight.w, transformedBottomLeft.x / transformedBottomLeft.w, transformedBottomRight.x / transformedBottomRight.w);
+  const maxX = Math.max(transformedTopLeft.x / transformedTopLeft.w, transformedTopRight.x / transformedTopRight.w, transformedBottomLeft.x / transformedBottomLeft.w, transformedBottomRight.x / transformedBottomRight.w);
+  const minY = Math.min(transformedTopLeft.y / transformedTopLeft.w, transformedTopRight.y / transformedTopRight.w, transformedBottomLeft.y / transformedBottomLeft.w, transformedBottomRight.y / transformedBottomRight.w);
+  const maxY = Math.max(transformedTopLeft.y / transformedTopLeft.w, transformedTopRight.y / transformedTopRight.w, transformedBottomLeft.y / transformedBottomLeft.w, transformedBottomRight.y / transformedBottomRight.w);
+  return new DOMRect(minX, minY, maxX - minX, maxY - minY);
+}
+
 // src/drawing/transform-in-3d.ts
 function compileShader(shaderGl, source, type) {
   const shader = shaderGl.createShader(type);
@@ -1336,39 +1561,43 @@ var createHelperCanvas = ({
   return helperCanvas;
 };
 var transformIn3d = ({
-  canvasWidth,
-  canvasHeight,
   matrix,
   sourceCanvas,
-  offsetLeft,
-  offsetTop
+  untransformedRect
 }) => {
-  const { canvas, gl, program } = createHelperCanvas({ canvasWidth, canvasHeight });
+  const rectAfterTransforms = transformDOMRect({
+    rect: untransformedRect,
+    matrix
+  });
+  const { canvas, gl, program } = createHelperCanvas({
+    canvasWidth: Math.ceil(rectAfterTransforms.width),
+    canvasHeight: Math.ceil(rectAfterTransforms.height)
+  });
   const vertexBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
   const vertices = new Float32Array([
-    offsetLeft,
-    offsetTop,
+    untransformedRect.x,
+    untransformedRect.y,
     0,
     0,
-    canvasWidth + offsetLeft,
-    offsetTop,
+    untransformedRect.x + untransformedRect.width,
+    untransformedRect.y,
     1,
     0,
-    offsetLeft,
-    canvasHeight + offsetTop,
+    untransformedRect.x,
+    untransformedRect.y + untransformedRect.height,
     0,
     1,
-    offsetLeft,
-    canvasHeight + offsetTop,
+    untransformedRect.x,
+    untransformedRect.y + untransformedRect.height,
     0,
     1,
-    canvasWidth + offsetLeft,
-    offsetTop,
+    untransformedRect.x + untransformedRect.width,
+    untransformedRect.y,
     1,
     0,
-    canvasWidth + offsetLeft,
-    canvasHeight + offsetTop,
+    untransformedRect.x + untransformedRect.width,
+    untransformedRect.y + untransformedRect.height,
     1,
     1
   ]);
@@ -1401,8 +1630,8 @@ var transformIn3d = ({
     0,
     -2 / zScale,
     0,
-    -1,
-    1,
+    -1 + 2 * -rectAfterTransforms.x / canvas.width,
+    1 - 2 * -rectAfterTransforms.y / canvas.height,
     0,
     1
   ]);
@@ -1415,66 +1644,88 @@ var transformIn3d = ({
   gl.drawArrays(gl.TRIANGLES, 0, 6);
   gl.deleteTexture(texture);
   gl.deleteBuffer(vertexBuffer);
-  return canvas;
+  return { canvas, rect: rectAfterTransforms };
 };
 
-// src/drawing/draw-element-to-canvas.ts
-var drawElementToCanvas = async ({
+// src/drawing/handle-3d-transform.ts
+var handle3dTransform = async ({
+  element,
+  matrix,
+  parentRect,
+  context,
+  logLevel,
+  internalState
+}) => {
+  const unclampedBiggestBoundingClientRect = getBiggestBoundingClientRect(element);
+  const biggestPossiblePretransformRect = getPreTransformRect(parentRect, matrix);
+  const preTransformRect = getNarrowerRect({
+    firstRect: unclampedBiggestBoundingClientRect,
+    secondRect: biggestPossiblePretransformRect
+  });
+  const start = Date.now();
+  const tempCanvas = new OffscreenCanvas(Math.ceil(preTransformRect.width), Math.ceil(preTransformRect.height));
+  await compose({
+    element,
+    context: tempCanvas.getContext("2d"),
+    logLevel,
+    parentRect: preTransformRect,
+    internalState
+  });
+  const afterCompose = Date.now();
+  const { canvas: transformed, rect: transformedRect } = transformIn3d({
+    untransformedRect: preTransformRect,
+    matrix,
+    sourceCanvas: tempCanvas
+  });
+  context.drawImage(transformed, transformedRect.x, transformedRect.y);
+  const afterDraw = Date.now();
+  Internals4.Log.trace({
+    logLevel,
+    tag: "@remotion/web-renderer"
+  }, `Transforming element in 3D - canvas size: ${transformedRect.width}x${transformedRect.height} - compose: ${afterCompose - start}ms - draw: ${afterDraw - afterCompose}ms`);
+  internalState.add3DTransform({
+    canvasWidth: Math.ceil(transformedRect.width),
+    canvasHeight: Math.ceil(transformedRect.height)
+  });
+};
+
+// src/drawing/process-node.ts
+var processNode = async ({
   element,
   context,
   draw,
-  offsetLeft,
-  offsetTop,
-  logLevel
+  logLevel,
+  parentRect,
+  internalState
 }) => {
-  const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
+  const transforms = calculateTransforms({
+    element,
+    offsetLeft: parentRect.x,
+    offsetTop: parentRect.y
+  });
+  const { totalMatrix, reset, dimensions, opacity, computedStyle } = transforms;
   if (opacity === 0) {
     reset();
-    return "continue";
+    return { type: "continue", cleanupAfterChildren: () => {} };
   }
   if (dimensions.width <= 0 || dimensions.height <= 0) {
     reset();
-    return "continue";
+    return { type: "continue", cleanupAfterChildren: () => {} };
   }
   if (!totalMatrix.is2D) {
-    const biggestBoundingClientRect = getBiggestBoundingClientRect(element);
-    const canvasOffsetLeft = Math.min(biggestBoundingClientRect.left, 0);
-    const canvasOffsetTop = Math.min(biggestBoundingClientRect.top, 0);
-    const tempCanvasWidth = Math.max(biggestBoundingClientRect.width, biggestBoundingClientRect.right);
-    const tempCanvasHeight = Math.max(biggestBoundingClientRect.height, biggestBoundingClientRect.bottom);
-    const start = Date.now();
-    const tempCanvas = new OffscreenCanvas(tempCanvasWidth, tempCanvasHeight);
-    const context2 = tempCanvas.getContext("2d");
-    if (!context2) {
-      throw new Error("Could not get context");
-    }
-    await compose({
+    await handle3dTransform({
       element,
-      context: context2,
-      offsetLeft: canvasOffsetLeft,
-      offsetTop: canvasOffsetTop,
-      logLevel
-    });
-    const afterCompose = Date.now();
-    const transformed = transformIn3d({
-      canvasWidth: tempCanvasWidth,
-      canvasHeight: tempCanvasHeight,
       matrix: totalMatrix,
-      sourceCanvas: tempCanvas,
-      offsetLeft: canvasOffsetLeft,
-      offsetTop: canvasOffsetTop
+      parentRect,
+      context,
+      logLevel,
+      internalState
     });
-    context.drawImage(transformed, 0, 0);
-    const afterDraw = Date.now();
     reset();
-    Internals4.Log.trace({
-      logLevel,
-      tag: "@remotion/web-renderer"
-    }, `Transforming element in 3D - canvas size: ${tempCanvasWidth}x${tempCanvasHeight} - compose: ${afterCompose - start}ms - draw: ${afterDraw - afterCompose}ms`);
-    return "skip-children";
+    return { type: "skip-children" };
   }
-  await drawElement({
-    dimensions: new DOMRect(dimensions.left - offsetLeft, dimensions.top - offsetTop, dimensions.width, dimensions.height),
+  const { cleanupAfterChildren } = await drawElement({
+    rect: new DOMRect(dimensions.left - parentRect.x, dimensions.top - parentRect.y, dimensions.width, dimensions.height),
     computedStyle,
     context,
     draw,
@@ -1482,7 +1733,7 @@ var drawElementToCanvas = async ({
     totalMatrix
   });
   reset();
-  return "continue";
+  return { type: "continue", cleanupAfterChildren };
 };
 
 // src/drawing/text/draw-text.ts
@@ -1651,9 +1902,9 @@ var drawText = (span) => {
 var handleTextNode = async ({
   node,
   context,
-  offsetLeft,
-  offsetTop,
-  logLevel
+  logLevel,
+  parentRect,
+  internalState
 }) => {
   const span = document.createElement("span");
   const parent = node.parentNode;
@@ -1662,62 +1913,56 @@ var handleTextNode = async ({
   }
   parent.insertBefore(span, node);
   span.appendChild(node);
-  const value = await drawElementToCanvas({
+  const value = await processNode({
     context,
     element: span,
     draw: drawText(span),
-    offsetLeft,
-    offsetTop,
-    logLevel
+    logLevel,
+    parentRect,
+    internalState
   });
   parent.insertBefore(node, span);
   parent.removeChild(span);
   return value;
 };
 
-// src/walk-tree.ts
-function skipToNextNonDescendant(treeWalker) {
-  if (treeWalker.nextSibling()) {
-    return true;
-  }
-  while (treeWalker.parentNode()) {
-    if (treeWalker.nextSibling()) {
-      return true;
-    }
-  }
-  return false;
-}
-
 // src/compose.ts
 var walkOverNode = ({
   node,
   context,
-  offsetLeft,
-  offsetTop,
-  logLevel
+  logLevel,
+  parentRect,
+  internalState
 }) => {
   if (node instanceof HTMLElement || node instanceof SVGElement) {
-    return drawElementToCanvas({
+    return processNode({
       element: node,
       context,
       draw: drawDomElement(node),
-      offsetLeft,
-      offsetTop,
-      logLevel
+      logLevel,
+      parentRect,
+      internalState
     });
   }
   if (node instanceof Text) {
-    return handleTextNode({ node, context, offsetLeft, offsetTop, logLevel });
+    return handleTextNode({
+      node,
+      context,
+      logLevel,
+      parentRect,
+      internalState
+    });
   }
   throw new Error("Unknown node type");
 };
 var compose = async ({
   element,
   context,
-  offsetLeft,
-  offsetTop,
-  logLevel
+  logLevel,
+  parentRect,
+  internalState
 }) => {
+  const cleanupAfterChildren = [];
   const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, (node) => {
     if (node instanceof Element) {
       if (node.parentElement instanceof SVGSVGElement) {
@@ -1729,21 +1974,39 @@ var compose = async ({
     return NodeFilter.FILTER_ACCEPT;
   });
   while (true) {
+    for (let i = 0;i < cleanupAfterChildren.length; ) {
+      const cleanup = cleanupAfterChildren[i];
+      if (!(cleanup.element === treeWalker.currentNode || cleanup.element.contains(treeWalker.currentNode))) {
+        cleanup.cleanupFn();
+        cleanupAfterChildren.splice(i, 1);
+      } else {
+        i++;
+      }
+    }
     const val = await walkOverNode({
       node: treeWalker.currentNode,
       context,
-      offsetLeft,
-      offsetTop,
-      logLevel
+      logLevel,
+      parentRect,
+      internalState
     });
-    if (val === "skip-children") {
+    if (val.type === "skip-children") {
       if (!skipToNextNonDescendant(treeWalker)) {
         break;
       }
-    } else if (!treeWalker.nextNode()) {
-      break;
+    } else {
+      cleanupAfterChildren.push({
+        element: treeWalker.currentNode,
+        cleanupFn: val.cleanupAfterChildren
+      });
+      if (!treeWalker.nextNode()) {
+        break;
+      }
     }
   }
+  for (const cleanup of cleanupAfterChildren) {
+    cleanup.cleanupFn();
+  }
 };
 
 // src/take-screenshot.ts
@@ -1751,14 +2014,21 @@ var createFrame = async ({
   div,
   width,
   height,
-  logLevel
+  logLevel,
+  internalState
 }) => {
   const canvas = new OffscreenCanvas(width, height);
   const context = canvas.getContext("2d");
   if (!context) {
     throw new Error("Could not get context");
   }
-  await compose({ element: div, context, offsetLeft: 0, offsetTop: 0, logLevel });
+  await compose({
+    element: div,
+    context,
+    logLevel,
+    parentRect: new DOMRect(0, 0, width, height),
+    internalState
+  });
   return canvas;
 };
 var takeScreenshot = async ({
@@ -1766,9 +2036,16 @@ var takeScreenshot = async ({
   width,
   height,
   imageFormat,
-  logLevel
+  logLevel,
+  internalState
 }) => {
-  const frame = await createFrame({ div, width, height, logLevel });
+  const frame = await createFrame({
+    div,
+    width,
+    height,
+    logLevel,
+    internalState
+  });
   const imageData = await frame.convertToBlob({
     type: `image/${imageFormat}`
   });
@@ -1982,6 +2259,7 @@ var internalRenderMediaOnWeb = async ({
     defaultCodec: resolved.defaultCodec,
     defaultOutName: resolved.defaultOutName
   });
+  const internalState = makeInternalState();
   const artifactsHandler = handleArtifacts();
   cleanupFns.push(() => {
     cleanupScaffold();
@@ -2060,7 +2338,8 @@ var internalRenderMediaOnWeb = async ({
         div,
         width: resolved.width,
         height: resolved.height,
-        logLevel
+        logLevel,
+        internalState
       });
       if (signal?.aborted) {
         throw new Error("renderMediaOnWeb() was cancelled");
@@ -2118,7 +2397,8 @@ var internalRenderMediaOnWeb = async ({
       return {
         getBlob: () => {
           return webFsTarget.getBlob();
-        }
+        },
+        internalState
       };
     }
     if (!(target instanceof BufferTarget)) {
@@ -2135,7 +2415,8 @@ var internalRenderMediaOnWeb = async ({
           throw new Error("The resulting buffer is empty");
         }
         return Promise.resolve(new Blob([target.buffer], { type: mimeType }));
-      }
+      },
+      internalState
     };
   } catch (err) {
     sendUsageEvent({
@@ -2206,6 +2487,7 @@ async function internalRenderStillOnWeb({
   if (signal?.aborted) {
     return Promise.reject(new Error("renderStillOnWeb() was cancelled"));
   }
+  const internalState = makeInternalState();
   const { delayRenderScope, div, cleanupScaffold, collectAssets } = await createScaffold({
     width: resolved.width,
     height: resolved.height,
@@ -2243,7 +2525,8 @@ async function internalRenderStillOnWeb({
       width: resolved.width,
       height: resolved.height,
       imageFormat,
-      logLevel
+      logLevel,
+      internalState
     });
     const assets = collectAssets.current.collectAssets();
     if (onArtifact) {
@@ -2254,7 +2537,7 @@ async function internalRenderStillOnWeb({
       succeeded: true,
       apiName: "renderStillOnWeb"
     });
-    return imageData;
+    return { blob: imageData, internalState };
   } catch (err) {
     sendUsageEvent({
       succeeded: false,