html2canvas-pro 2.6.0 → 2.6.2

package/dist/html2canvas-pro.esm.js

@@ -1,9 +1,9 @@
 /*!
-* html2canvas-pro 2.6.0 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.6.2 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
-//#region src/config.ts
+// src/config.ts
 /**
 * Html2Canvas Configuration
 *
@@ -46,8 +46,7 @@ var Html2CanvasConfig = class Html2CanvasConfig {
 		});
 	}
 };
-//#endregion
-//#region src/core/validator.ts
+// src/core/validator.ts
 /**
 * Input Validator
 *
@@ -435,8 +434,7 @@ function createDefaultValidator(config = {}) {
 		...config
 	});
 }
-//#endregion
-//#region src/core/performance-monitor.ts
+// src/core/performance-monitor.ts
 /**
 * Performance Monitor
 *
@@ -445,7 +443,8 @@ function createDefaultValidator(config = {}) {
 *
 * Usage:
 * ```typescript
-* const monitor = new PerformanceMonitor(context);
+* // Standalone (logs disabled) or with the render pipeline's context.
+* const monitor = new PerformanceMonitor(null);
 *
 * monitor.start('clone');
 * await cloneDocument();
@@ -455,13 +454,13 @@ function createDefaultValidator(config = {}) {
 * ```
 */
 var PerformanceMonitor = class {
-	context;
+	logger;
 	activeMetrics = /* @__PURE__ */ new Map();
 	completedMetrics = [];
 	enabled;
 	getTime;
-	constructor(context, enabled = true) {
-		this.context = context;
+	constructor(logger, enabled = true) {
+		this.logger = logger;
 		this.enabled = enabled;
 		this.getTime = typeof performance !== "undefined" && typeof performance.now === "function" ? () => performance.now() : () => Date.now();
 	}
@@ -473,7 +472,7 @@ var PerformanceMonitor = class {
 	*/
 	start(name, metadata) {
 		if (!this.enabled) return;
-		if (this.activeMetrics.has(name)) this.context?.logger.warn(`Performance metric '${name}' already started. Overwriting.`);
+		if (this.activeMetrics.has(name)) this.logger?.warn(`Performance metric '${name}' already started. Overwriting.`);
 		this.activeMetrics.set(name, {
 			name,
 			startTime: this.getTime(),
@@ -490,14 +489,14 @@ var PerformanceMonitor = class {
 		if (!this.enabled) return;
 		const metric = this.activeMetrics.get(name);
 		if (!metric) {
-			this.context?.logger.warn(`Performance metric '${name}' not found. Was start() called?`);
+			this.logger?.warn(`Performance metric '${name}' not found. Was start() called?`);
 			return;
 		}
 		metric.endTime = this.getTime();
 		metric.duration = metric.endTime - metric.startTime;
 		this.completedMetrics.push(metric);
 		this.activeMetrics.delete(name);
-		this.context?.logger.debug(`⏱️  ${name}: ${metric.duration.toFixed(2)}ms`, metric.metadata);
+		this.logger?.debug(`⏱️  ${name}: ${metric.duration.toFixed(2)}ms`, metric.metadata);
 		return metric;
 	}
 	/**
@@ -577,11 +576,12 @@ var PerformanceMonitor = class {
 	* Log performance summary to console
 	*/
 	logSummary() {
-		if (!this.enabled || this.completedMetrics.length === 0 || !this.context) return;
+		if (!this.enabled || this.completedMetrics.length === 0 || !this.logger) return;
+		const logger = this.logger;
 		const summary = this.getSummary();
-		this.context.logger.info(`\n📊 Performance Summary (Total: ${summary.totalDuration.toFixed(2)}ms):`);
+		logger.info(`\n📊 Performance Summary (Total: ${summary.totalDuration.toFixed(2)}ms):`);
 		summary.breakdown.sort((a, b) => b.duration - a.duration).forEach((item) => {
-			this.context.logger.info(`  ${item.name.padEnd(20)} ${item.duration.toFixed(2).padStart(8)}ms  ${item.percentage.padStart(6)}`);
+			logger.info(`  ${item.name.padEnd(20)} ${item.duration.toFixed(2).padStart(8)}ms  ${item.percentage.padStart(6)}`);
 		});
 	}
 	/**
@@ -605,8 +605,7 @@ var PerformanceMonitor = class {
 		return Array.from(this.activeMetrics.keys());
 	}
 };
-//#endregion
-//#region src/css/layout/bounds.ts
+// src/css/layout/bounds.ts
 var Bounds = class Bounds {
 	left;
 	top;
@@ -642,8 +641,7 @@ const parseDocumentSize = (document) => {
 	if (!body || !documentElement) throw new Error(`Unable to get document size`);
 	return new Bounds(0, 0, Math.max(Math.max(body.scrollWidth, documentElement.scrollWidth), Math.max(body.offsetWidth, documentElement.offsetWidth), Math.max(body.clientWidth, documentElement.clientWidth)), Math.max(Math.max(body.scrollHeight, documentElement.scrollHeight), Math.max(body.offsetHeight, documentElement.offsetHeight), Math.max(body.clientHeight, documentElement.clientHeight)));
 };
-//#endregion
-//#region src/core/util.ts
+// src/core/util.ts
 /**
 * Indexed access where the shape/arity is guaranteed by construction (the CSS
 * grammar or a preceding length check). Throws on the impossible case instead
@@ -721,8 +719,7 @@ const stringToNumber = (codePoints) => {
 	const exp = exponent.length ? parseInt(String.fromCodePoint(...exponent), 10) : 0;
 	return sign * (int + frac * Math.pow(10, -fracd)) * Math.pow(10, expsign * exp);
 };
-//#endregion
-//#region src/css/syntax/token-singletons.ts
+// src/css/syntax/token-singletons.ts
 const LEFT_PARENTHESIS_TOKEN = { type: 2 };
 const RIGHT_PARENTHESIS_TOKEN = { type: 3 };
 const COMMA_TOKEN = { type: 4 };
@@ -744,8 +741,7 @@ const LEFT_SQUARE_BRACKET_TOKEN = { type: 28 };
 const RIGHT_SQUARE_BRACKET_TOKEN = { type: 29 };
 const WHITESPACE_TOKEN = { type: 31 };
 const EOF_TOKEN = { type: 32 };
-//#endregion
-//#region src/css/syntax/tokenizer.ts
+// src/css/syntax/tokenizer.ts
 var Tokenizer = class Tokenizer {
 	static _pool = [];
 	static MAX_POOL_SIZE = 40;
@@ -1201,8 +1197,7 @@ var Tokenizer = class Tokenizer {
 		}
 	}
 };
-//#endregion
-//#region src/css/syntax/parser.ts
+// src/css/syntax/parser.ts
 var Parser = class Parser {
 	_tokens;
 	constructor(tokens) {
@@ -1311,8 +1306,7 @@ const isEndingTokenFor = (token, type) => {
 	if (type === 28 && token.type === 29) return true;
 	return type === 2 && token.type === 3;
 };
-//#endregion
-//#region src/css/types/safe-eval.ts
+// src/css/types/safe-eval.ts
 /**
 * Safe arithmetic expression evaluator — replaces `new Function()`.
 *
@@ -1370,8 +1364,7 @@ const safeEvalArithmetic = (expr) => {
 	}
 	return stack.length === 1 ? stack[0] ?? NaN : NaN;
 };
-//#endregion
-//#region src/css/types/color-math.ts
+// src/css/types/color-math.ts
 /**
 * Color mathematics utilities
 * Extracted to break circular dependency between srgb.ts and color-utilities.ts
@@ -1392,8 +1385,7 @@ const multiplyMatrices = (A, B) => {
 		A[6] * B[0] + A[7] * B[1] + A[8] * B[2]
 	];
 };
-//#endregion
-//#region src/css/types/color-spaces/srgb.ts
+// src/css/types/color-spaces/srgb.ts
 /**
 * SRGB related functions
 */
@@ -1502,11 +1494,9 @@ const srgbLinearFromXYZ = (args) => {
 		args[3]
 	];
 };
-//#endregion
-//#region src/css/types/length.ts
+// src/css/types/length.ts
 const isLength = (token) => token.type === 17 || token.type === 15;
-//#endregion
-//#region src/css/types/length-percentage.ts
+// src/css/types/length-percentage.ts
 const isLengthPercentage = (token) => token.type === 16 || isLength(token) || isCalcWithPercentage(token);
 /**
 * Check if a token is a CalcWithPercentage deferred token.
@@ -1630,8 +1620,7 @@ const getAbsoluteValue = (token, parent) => {
 	}
 	return token.number;
 };
-//#endregion
-//#region src/css/types/angle.ts
+// src/css/types/angle.ts
 const DEG = "deg";
 const GRAD = "grad";
 const RAD = "rad";
@@ -1684,8 +1673,7 @@ const parseNamedSide = (tokens) => {
 	return 0;
 };
 const deg = (deg) => Math.PI * deg / 180;
-//#endregion
-//#region src/css/types/color-utilities.ts
+// src/css/types/color-utilities.ts
 const isTransparent = (color) => (255 & color) === 0;
 const asString = (color) => {
 	const alpha = 255 & color;
@@ -2140,8 +2128,7 @@ const convertXyz50 = (args) => {
 		args[3]
 	]);
 };
-//#endregion
-//#region src/css/types/color-spaces/p3.ts
+// src/css/types/color-spaces/p3.ts
 /**
 * Display-P3 related functions
 */
@@ -2259,8 +2246,7 @@ const convertP3 = (args) => {
 		args[3]
 	]);
 };
-//#endregion
-//#region src/css/types/color-spaces/a98.ts
+// src/css/types/color-spaces/a98.ts
 /**
 * A98-RGB related functions
 */
@@ -2366,8 +2352,7 @@ const convertA98rgb = (args) => {
 		args[3]
 	]);
 };
-//#endregion
-//#region src/css/types/color-spaces/pro-photo.ts
+// src/css/types/color-spaces/pro-photo.ts
 /**
 * Pro Photo related functions
 */
@@ -2492,8 +2477,7 @@ const convertProPhoto = (args) => {
 		args[3]
 	]);
 };
-//#endregion
-//#region src/css/types/color-spaces/rec2020.ts
+// src/css/types/color-spaces/rec2020.ts
 /**
 * REC2020 related functions
 */
@@ -2614,8 +2598,7 @@ const convertRec2020 = (args) => {
 		args[3]
 	]);
 };
-//#endregion
-//#region src/css/types/functions/color-mix.ts
+// src/css/types/functions/color-mix.ts
 const HUE_DEG_INDEX = {
 	lch: 2,
 	oklch: 2,
@@ -3001,8 +2984,7 @@ const colorMix = (context, args) => {
 		return 0;
 	}
 };
-//#endregion
-//#region src/css/types/color.ts
+// src/css/types/color.ts
 const color$1 = {
 	name: "color",
 	parse: (context, value) => {
@@ -3406,8 +3388,7 @@ const COLORS = {
 	YELLOW: 4294902015,
 	YELLOWGREEN: 2597139199
 };
-//#endregion
-//#region src/dom/node-type-guards.ts
+// src/dom/node-type-guards.ts
 /**
 * DOM Node Type Guards
 *
@@ -3463,8 +3444,7 @@ const VOID_OR_REPLACED_TAGS = /* @__PURE__ */ new Set([
 * SVG elements also do not support pseudo-elements.
 */
 const canHavePseudoElements = (element) => !isSVGElementNode(element) && !VOID_OR_REPLACED_TAGS.has(element.tagName);
-//#endregion
-//#region src/css/property-descriptors/list-style-type.ts
+// src/css/property-descriptors/list-style-type.ts
 const listStyleType = {
 	name: "list-style-type",
 	initialValue: "none",
@@ -3529,11 +3509,9 @@ const listStyleType = {
 		}
 	}
 };
-//#endregion
-//#region src/core/bitwise.ts
+// src/core/bitwise.ts
 const contains = (bit, value) => (bit & value) !== 0;
-//#endregion
-//#region src/css/types/functions/counter.ts
+// src/css/types/functions/counter.ts
 var CounterState = class {
 	counters = {};
 	getCounterValue(name) {
@@ -3949,8 +3927,7 @@ const createCounterText = (value, type, appendSuffix) => {
 		default: return createCounterStyleFromRange(value, 48, 57, true, defaultSuffix);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/display.ts
+// src/css/property-descriptors/display.ts
 const display = {
 	name: "display",
 	initialValue: "inline-block",
@@ -3999,8 +3976,7 @@ const parseDisplayValue$1 = (display) => {
 	}
 	return 0;
 };
-//#endregion
-//#region src/css/property-descriptors/float.ts
+// src/css/property-descriptors/float.ts
 const float = {
 	name: "float",
 	initialValue: "none",
@@ -4016,8 +3992,7 @@ const float = {
 		return 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/overflow.ts
+// src/css/property-descriptors/overflow.ts
 const overflow = {
 	name: "overflow",
 	initialValue: "visible",
@@ -4035,8 +4010,7 @@ const overflow = {
 		});
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/text-decoration-color.ts
+// src/css/property-descriptors/text-decoration-color.ts
 const textDecorationColor = {
 	name: `text-decoration-color`,
 	initialValue: "transparent",
@@ -4044,8 +4018,7 @@ const textDecorationColor = {
 	type: 3,
 	format: "color"
 };
-//#endregion
-//#region src/css/property-descriptors/text-decoration-line.ts
+// src/css/property-descriptors/text-decoration-line.ts
 const textDecorationLine = {
 	name: "text-decoration-line",
 	initialValue: "none",
@@ -4063,8 +4036,7 @@ const textDecorationLine = {
 		}).filter((line) => line !== 0);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/content.ts
+// src/css/property-descriptors/content.ts
 const content = {
 	name: "content",
 	initialValue: "none",
@@ -4077,8 +4049,7 @@ const content = {
 		return tokens;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/quotes.ts
+// src/css/property-descriptors/quotes.ts
 const quotes = {
 	name: "quotes",
 	initialValue: "none",
@@ -4108,8 +4079,7 @@ const getQuote = (quotes, depth, open) => {
 	if (!quote) return "";
 	return open ? quote.open : quote.close;
 };
-//#endregion
-//#region src/css/property-descriptors/counter-increment.ts
+// src/css/property-descriptors/counter-increment.ts
 /** Shared counter-ID parsing: returns next number or a fallback default. */
 const parseCounterValue = (tokens, defaultNumber) => {
 	const entries = [];
@@ -4139,8 +4109,7 @@ const counterIncrement = {
 		}));
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/counter-reset.ts
+// src/css/property-descriptors/counter-reset.ts
 const counterReset = {
 	name: "counter-reset",
 	initialValue: "none",
@@ -4154,8 +4123,7 @@ const counterReset = {
 		}));
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/background-clip.ts
+// src/css/property-descriptors/background-clip.ts
 const backgroundClip = {
 	name: "background-clip",
 	initialValue: "border-box",
@@ -4172,8 +4140,7 @@ const backgroundClip = {
 		});
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/background-color.ts
+// src/css/property-descriptors/background-color.ts
 const backgroundColor = {
 	name: `background-color`,
 	initialValue: "transparent",
@@ -4181,8 +4148,7 @@ const backgroundColor = {
 	type: 3,
 	format: "color"
 };
-//#endregion
-//#region src/css/types/functions/gradient.ts
+// src/css/types/functions/gradient.ts
 const parseColorStop = (context, args) => {
 	const color = color$1.parse(context, at(args, 0));
 	const stop = args[1];
@@ -4318,8 +4284,7 @@ const calculateRadius = (gradient, x, y, width, height) => {
 	}
 	return [rx, ry];
 };
-//#endregion
-//#region src/css/types/functions/linear-gradient.ts
+// src/css/types/functions/linear-gradient.ts
 const linearGradient = (context, tokens) => {
 	let angle$2 = deg(180);
 	const stops = [];
@@ -4343,8 +4308,7 @@ const linearGradient = (context, tokens) => {
 		type: 1
 	};
 };
-//#endregion
-//#region src/css/types/functions/-prefix-linear-gradient.ts
+// src/css/types/functions/-prefix-linear-gradient.ts
 const prefixLinearGradient = (context, tokens) => {
 	let angle$1 = deg(180);
 	const stops = [];
@@ -4373,8 +4337,7 @@ const prefixLinearGradient = (context, tokens) => {
 		type: 1
 	};
 };
-//#endregion
-//#region src/css/types/functions/-webkit-gradient.ts
+// src/css/types/functions/-webkit-gradient.ts
 const webkitGradient = (context, tokens) => {
 	const angle = deg(180);
 	const stops = [];
@@ -4436,8 +4399,7 @@ const webkitGradient = (context, tokens) => {
 		type
 	};
 };
-//#endregion
-//#region src/css/types/functions/radial-gradient.ts
+// src/css/types/functions/radial-gradient.ts
 const CLOSEST_SIDE = "closest-side";
 const FARTHEST_SIDE = "farthest-side";
 const CLOSEST_CORNER = "closest-corner";
@@ -4517,8 +4479,7 @@ const radialGradient = (context, tokens) => {
 		type: 2
 	};
 };
-//#endregion
-//#region src/css/types/functions/-prefix-radial-gradient.ts
+// src/css/types/functions/-prefix-radial-gradient.ts
 const prefixRadialGradient = (context, tokens) => {
 	let shape = 1;
 	let size = 3;
@@ -4589,16 +4550,14 @@ const prefixRadialGradient = (context, tokens) => {
 		type: 2
 	};
 };
-//#endregion
-//#region src/css/types/functions/repeating-linear-gradient.ts
+// src/css/types/functions/repeating-linear-gradient.ts
 const repeatingLinearGradient = (context, tokens) => {
 	return {
 		...linearGradient(context, tokens),
 		type: 3
 	};
 };
-//#endregion
-//#region src/css/types/functions/repeating-radial-gradient.ts
+// src/css/types/functions/repeating-radial-gradient.ts
 /**
 * repeating-radial-gradient shares the radial-gradient grammar exactly; only
 * the image type differs, which switches the renderer to periodic stops.
@@ -4609,8 +4568,7 @@ const repeatingRadialGradient = (context, tokens) => {
 		type: 4
 	};
 };
-//#endregion
-//#region src/css/types/functions/conic-gradient.ts
+// src/css/types/functions/conic-gradient.ts
 /**
 * conic-gradient( [ from <angle> ]? [ at <position> ]?, <color-stop-list> )
 *
@@ -4680,8 +4638,7 @@ const repeatingConicGradient = (context, tokens) => {
 		type: 6
 	};
 };
-//#endregion
-//#region src/css/types/functions/image-set.ts
+// src/css/types/functions/image-set.ts
 const parseResolution = (token) => {
 	if (!token) return 1;
 	if (isDimensionToken(token)) {
@@ -4715,8 +4672,7 @@ const imageSet = (context, tokens) => {
 	const chosen = at(satisfying.length > 0 ? satisfying : candidates.slice().sort((a, b) => b.resolution - a.resolution), 0);
 	return image.parse(context, chosen.imageToken);
 };
-//#endregion
-//#region src/css/types/image.ts
+// src/css/types/image.ts
 const isLinearGradient = (background) => {
 	return background.type === 1;
 };
@@ -4786,8 +4742,7 @@ const SUPPORTED_IMAGE_FUNCTIONS = {
 	"image-set": imageSet,
 	"-webkit-image-set": imageSet
 };
-//#endregion
-//#region src/css/property-descriptors/background-image.ts
+// src/css/property-descriptors/background-image.ts
 const backgroundImage = {
 	name: "background-image",
 	initialValue: "none",
@@ -4801,8 +4756,7 @@ const backgroundImage = {
 		return tokens.filter((value) => nonFunctionArgSeparator(value) && isSupportedImage(value)).map((value) => image.parse(context, value));
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/background-origin.ts
+// src/css/property-descriptors/background-origin.ts
 const backgroundOrigin = {
 	name: "background-origin",
 	initialValue: "border-box",
@@ -4818,8 +4772,7 @@ const backgroundOrigin = {
 		});
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/background-position.ts
+// src/css/property-descriptors/background-position.ts
 const backgroundPosition = {
 	name: "background-position",
 	initialValue: "0% 0%",
@@ -4831,8 +4784,7 @@ const backgroundPosition = {
 		}).map(parseLengthPercentageTuple);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/background-repeat.ts
+// src/css/property-descriptors/background-repeat.ts
 const backgroundRepeat = {
 	name: "background-repeat",
 	initialValue: "repeat",
@@ -4852,8 +4804,7 @@ const parseBackgroundRepeat = (value) => {
 		default: return 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/background-size.ts
+// src/css/property-descriptors/background-size.ts
 const backgroundSize = {
 	name: "background-size",
 	initialValue: "0",
@@ -4864,8 +4815,7 @@ const backgroundSize = {
 	}
 };
 const isBackgroundSizeInfoToken = (value) => isIdentToken(value) || isLengthPercentage(value);
-//#endregion
-//#region src/css/property-descriptors/border-color.ts
+// src/css/property-descriptors/border-color.ts
 const borderColorForSide = (side) => ({
 	name: `border-${side}-color`,
 	initialValue: "transparent",
@@ -4877,8 +4827,7 @@ const borderTopColor = borderColorForSide("top");
 const borderRightColor = borderColorForSide("right");
 const borderBottomColor = borderColorForSide("bottom");
 const borderLeftColor = borderColorForSide("left");
-//#endregion
-//#region src/css/property-descriptors/border-radius.ts
+// src/css/property-descriptors/border-radius.ts
 const borderRadiusForSide = (side) => ({
 	name: `border-${side}-radius`,
 	initialValue: "0 0",
@@ -4890,8 +4839,7 @@ const borderTopLeftRadius = borderRadiusForSide("top-left");
 const borderTopRightRadius = borderRadiusForSide("top-right");
 const borderBottomRightRadius = borderRadiusForSide("bottom-right");
 const borderBottomLeftRadius = borderRadiusForSide("bottom-left");
-//#endregion
-//#region src/css/property-descriptors/border-style.ts
+// src/css/property-descriptors/border-style.ts
 const borderStyleForSide = (side) => ({
 	name: `border-${side}-style`,
 	initialValue: "solid",
@@ -4911,8 +4859,7 @@ const borderTopStyle = borderStyleForSide("top");
 const borderRightStyle = borderStyleForSide("right");
 const borderBottomStyle = borderStyleForSide("bottom");
 const borderLeftStyle = borderStyleForSide("left");
-//#endregion
-//#region src/css/property-descriptors/border-width.ts
+// src/css/property-descriptors/border-width.ts
 const borderWidthForSide = (side) => ({
 	name: `border-${side}-width`,
 	initialValue: "0",
@@ -4927,8 +4874,7 @@ const borderTopWidth = borderWidthForSide("top");
 const borderRightWidth = borderWidthForSide("right");
 const borderBottomWidth = borderWidthForSide("bottom");
 const borderLeftWidth = borderWidthForSide("left");
-//#endregion
-//#region src/css/property-descriptors/clip-path.ts
+// src/css/property-descriptors/clip-path.ts
 const NONE = { type: 0 };
 /**
 * Parse a shape-radius token: <length-percentage> | closest-side | farthest-side.
@@ -5149,8 +5095,7 @@ const clipPath = {
 		return NONE;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/color.ts
+// src/css/property-descriptors/color.ts
 const color = {
 	name: `color`,
 	initialValue: "transparent",
@@ -5158,8 +5103,7 @@ const color = {
 	type: 3,
 	format: "color"
 };
-//#endregion
-//#region src/css/property-descriptors/direction.ts
+// src/css/property-descriptors/direction.ts
 const direction = {
 	name: "direction",
 	initialValue: "ltr",
@@ -5172,8 +5116,7 @@ const direction = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/font-family.ts
+// src/css/property-descriptors/font-family.ts
 const fontFamily = {
 	name: `font-family`,
 	initialValue: "",
@@ -5210,8 +5153,7 @@ const fontFamily = {
 		return results.map((result, index) => quoted[index] || result.indexOf(" ") !== -1 ? `'${result.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\a ").replace(/\r/g, "\\d ").replace(/\f/g, "\\c ")}'` : result);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/font-size.ts
+// src/css/property-descriptors/font-size.ts
 const fontSize = {
 	name: `font-size`,
 	initialValue: "0",
@@ -5219,8 +5161,7 @@ const fontSize = {
 	type: 3,
 	format: "length"
 };
-//#endregion
-//#region src/css/property-descriptors/letter-spacing.ts
+// src/css/property-descriptors/letter-spacing.ts
 const letterSpacing = {
 	name: "letter-spacing",
 	initialValue: "0",
@@ -5233,8 +5174,7 @@ const letterSpacing = {
 		return 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/line-break.ts
+// src/css/property-descriptors/line-break.ts
 const lineBreak = {
 	name: "line-break",
 	initialValue: "normal",
@@ -5247,8 +5187,7 @@ const lineBreak = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/line-height.ts
+// src/css/property-descriptors/line-height.ts
 const lineHeight = {
 	name: "line-height",
 	initialValue: "normal",
@@ -5261,8 +5200,7 @@ const computeLineHeight = (token, fontSize) => {
 	else if (isLengthPercentage(token)) return getAbsoluteValue(token, fontSize);
 	return fontSize;
 };
-//#endregion
-//#region src/css/property-descriptors/list-style-image.ts
+// src/css/property-descriptors/list-style-image.ts
 const listStyleImage = {
 	name: "list-style-image",
 	initialValue: "none",
@@ -5275,8 +5213,7 @@ const listStyleImage = {
 		return image.parse(context, token);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/list-style-position.ts
+// src/css/property-descriptors/list-style-position.ts
 const listStylePosition = {
 	name: "list-style-position",
 	initialValue: "outside",
@@ -5289,8 +5226,7 @@ const listStylePosition = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/margin.ts
+// src/css/property-descriptors/margin.ts
 const marginForSide = (side) => ({
 	name: `margin-${side}`,
 	initialValue: "0",
@@ -5301,8 +5237,7 @@ const marginTop = marginForSide("top");
 const marginRight = marginForSide("right");
 const marginBottom = marginForSide("bottom");
 const marginLeft = marginForSide("left");
-//#endregion
-//#region src/css/property-descriptors/overflow-wrap.ts
+// src/css/property-descriptors/overflow-wrap.ts
 const overflowWrap = {
 	name: "overflow-wrap",
 	initialValue: "normal",
@@ -5315,8 +5250,7 @@ const overflowWrap = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/padding.ts
+// src/css/property-descriptors/padding.ts
 const paddingForSide = (side) => ({
 	name: `padding-${side}`,
 	initialValue: "0",
@@ -5328,8 +5262,7 @@ const paddingTop = paddingForSide("top");
 const paddingRight = paddingForSide("right");
 const paddingBottom = paddingForSide("bottom");
 const paddingLeft = paddingForSide("left");
-//#endregion
-//#region src/css/property-descriptors/text-align.ts
+// src/css/property-descriptors/text-align.ts
 const textAlign = {
 	name: "text-align",
 	initialValue: "left",
@@ -5344,8 +5277,7 @@ const textAlign = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/position.ts
+// src/css/property-descriptors/position.ts
 const position = {
 	name: "position",
 	initialValue: "static",
@@ -5361,8 +5293,7 @@ const position = {
 		return 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/text-shadow.ts
+// src/css/property-descriptors/text-shadow.ts
 const textShadow = {
 	name: "text-shadow",
 	initialValue: "none",
@@ -5392,8 +5323,7 @@ const textShadow = {
 		});
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/text-transform.ts
+// src/css/property-descriptors/text-transform.ts
 const textTransform = {
 	name: "text-transform",
 	initialValue: "none",
@@ -5408,8 +5338,7 @@ const textTransform = {
 		return 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/transform.ts
+// src/css/property-descriptors/transform.ts
 const transform$1 = {
 	name: "transform",
 	initialValue: "none",
@@ -5464,8 +5393,7 @@ const SUPPORTED_TRANSFORM_FUNCTIONS = {
 	matrix3d,
 	rotate: rotate$1
 };
-//#endregion
-//#region src/css/property-descriptors/transform-origin.ts
+// src/css/property-descriptors/transform-origin.ts
 const DEFAULT_VALUE = {
 	type: 16,
 	number: 50,
@@ -5483,8 +5411,7 @@ const transformOrigin = {
 		return [at(origins, 0), at(origins, 1)];
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/rotate.ts
+// src/css/property-descriptors/rotate.ts
 const rotate = {
 	name: "rotate",
 	initialValue: "none",
@@ -5499,8 +5426,7 @@ const rotate = {
 		return null;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/visibility.ts
+// src/css/property-descriptors/visibility.ts
 const visibility = {
 	name: "visibility",
 	initialValue: "none",
@@ -5514,8 +5440,7 @@ const visibility = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/word-break.ts
+// src/css/property-descriptors/word-break.ts
 const wordBreak = {
 	name: "word-break",
 	initialValue: "normal",
@@ -5529,8 +5454,7 @@ const wordBreak = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/white-space.ts
+// src/css/property-descriptors/white-space.ts
 const whiteSpace = {
 	name: "white-space",
 	initialValue: "normal",
@@ -5546,8 +5470,7 @@ const whiteSpace = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/writing-mode.ts
+// src/css/property-descriptors/writing-mode.ts
 const isVerticalWritingMode = (writingMode) => writingMode !== 0;
 const isSidewaysWritingMode = (writingMode) => writingMode === 3 || writingMode === 4;
 const writingMode = {
@@ -5565,8 +5488,7 @@ const writingMode = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/z-index.ts
+// src/css/property-descriptors/z-index.ts
 const zIndex = {
 	name: "z-index",
 	initialValue: "auto",
@@ -5584,8 +5506,7 @@ const zIndex = {
 		throw new Error(`Invalid z-index number parsed`);
 	}
 };
-//#endregion
-//#region src/css/types/time.ts
+// src/css/types/time.ts
 const time = {
 	name: "time",
 	parse: (_context, value) => {
@@ -5596,8 +5517,7 @@ const time = {
 		throw new Error(`Unsupported time type`);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/opacity.ts
+// src/css/property-descriptors/opacity.ts
 const opacity = {
 	name: "opacity",
 	initialValue: "1",
@@ -5608,8 +5528,7 @@ const opacity = {
 		return 1;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/text-decoration-style.ts
+// src/css/property-descriptors/text-decoration-style.ts
 const textDecorationStyle = {
 	name: "text-decoration-style",
 	initialValue: "solid",
@@ -5625,8 +5544,7 @@ const textDecorationStyle = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/text-decoration-thickness.ts
+// src/css/property-descriptors/text-decoration-thickness.ts
 const textDecorationThickness = {
 	name: "text-decoration-thickness",
 	initialValue: "auto",
@@ -5641,8 +5559,7 @@ const textDecorationThickness = {
 		return "auto";
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/text-underline-offset.ts
+// src/css/property-descriptors/text-underline-offset.ts
 const textUnderlineOffset = {
 	name: "text-underline-offset",
 	initialValue: "auto",
@@ -5656,8 +5573,7 @@ const textUnderlineOffset = {
 		return "auto";
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/font-weight.ts
+// src/css/property-descriptors/font-weight.ts
 const fontWeight = {
 	name: "font-weight",
 	initialValue: "normal",
@@ -5672,8 +5588,7 @@ const fontWeight = {
 		return 400;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/font-variant.ts
+// src/css/property-descriptors/font-variant.ts
 const fontVariant = {
 	name: "font-variant",
 	initialValue: "none",
@@ -5683,8 +5598,7 @@ const fontVariant = {
 		return tokens.filter(isIdentToken).map((token) => token.value);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/font-style.ts
+// src/css/property-descriptors/font-style.ts
 const fontStyle = {
 	name: "font-style",
 	initialValue: "normal",
@@ -5698,8 +5612,7 @@ const fontStyle = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/duration.ts
+// src/css/property-descriptors/duration.ts
 const duration = {
 	name: "duration",
 	initialValue: "0s",
@@ -5709,8 +5622,7 @@ const duration = {
 		return tokens.filter(isDimensionToken).map((token) => time.parse(context, token));
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/box-shadow.ts
+// src/css/property-descriptors/box-shadow.ts
 const boxShadow = {
 	name: "box-shadow",
 	initialValue: "none",
@@ -5744,8 +5656,7 @@ const boxShadow = {
 		});
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/paint-order.ts
+// src/css/property-descriptors/paint-order.ts
 const paintOrder = {
 	name: "paint-order",
 	initialValue: "normal",
@@ -5775,8 +5686,7 @@ const paintOrder = {
 		return layers;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/webkit-text-stroke-color.ts
+// src/css/property-descriptors/webkit-text-stroke-color.ts
 const webkitTextStrokeColor = {
 	name: `-webkit-text-stroke-color`,
 	initialValue: "currentcolor",
@@ -5784,8 +5694,7 @@ const webkitTextStrokeColor = {
 	type: 3,
 	format: "color"
 };
-//#endregion
-//#region src/css/property-descriptors/webkit-text-stroke-width.ts
+// src/css/property-descriptors/webkit-text-stroke-width.ts
 const webkitTextStrokeWidth = {
 	name: `-webkit-text-stroke-width`,
 	initialValue: "0",
@@ -5796,8 +5705,7 @@ const webkitTextStrokeWidth = {
 		return 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/webkit-line-clamp.ts
+// src/css/property-descriptors/webkit-line-clamp.ts
 /**
 * -webkit-line-clamp property descriptor
 * Used with display: -webkit-box and -webkit-box-orient: vertical
@@ -5814,8 +5722,7 @@ const webkitLineClamp = {
 		return 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/object-fit.ts
+// src/css/property-descriptors/object-fit.ts
 const objectFit = {
 	name: "object-fit",
 	initialValue: "fill",
@@ -5836,8 +5743,7 @@ const parseDisplayValue = (display) => {
 	}
 	return 0;
 };
-//#endregion
-//#region src/css/property-descriptors/text-overflow.ts
+// src/css/property-descriptors/text-overflow.ts
 const textOverflow = {
 	name: "text-overflow",
 	initialValue: "clip",
@@ -5850,8 +5756,7 @@ const textOverflow = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/image-rendering.ts
+// src/css/property-descriptors/image-rendering.ts
 const imageRendering = {
 	name: "image-rendering",
 	initialValue: "auto",
@@ -5870,8 +5775,7 @@ const imageRendering = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/mix-blend-mode.ts
+// src/css/property-descriptors/mix-blend-mode.ts
 const MIX_BLEND_MODE$1 = {
 	NORMAL: "normal",
 	MULTIPLY: "multiply",
@@ -5900,8 +5804,7 @@ const mixBlendMode = {
 		return VALID_VALUES$1.has(token) ? token : MIX_BLEND_MODE$1.NORMAL;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/filter.ts
+// src/css/property-descriptors/filter.ts
 const filter = {
 	name: "filter",
 	initialValue: "none",
@@ -5971,8 +5874,7 @@ const renderFilterArgs = (values) => {
 	}
 	return parts.join("").trim();
 };
-//#endregion
-//#region src/css/property-descriptors/font-variant-ligatures.ts
+// src/css/property-descriptors/font-variant-ligatures.ts
 const fontVariantLigatures = {
 	name: "font-variant-ligatures",
 	initialValue: "normal",
@@ -5993,8 +5895,7 @@ const fontVariantLigatures = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/zoom.ts
+// src/css/property-descriptors/zoom.ts
 const zoom = {
 	name: "zoom",
 	initialValue: "1",
@@ -6006,8 +5907,7 @@ const zoom = {
 		return 1;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/object-position.ts
+// src/css/property-descriptors/object-position.ts
 const objectPosition = {
 	name: "object-position",
 	initialValue: "50% 50%",
@@ -6069,8 +5969,7 @@ const backgroundBlendMode = {
 		return modes.length > 0 ? modes : ["normal"];
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/border-image-source.ts
+// src/css/property-descriptors/border-image-source.ts
 const borderImageSource = {
 	name: "border-image-source",
 	initialValue: "none",
@@ -6084,8 +5983,7 @@ const borderImageSource = {
 		return image.parse(context, at(filtered, 0));
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/border-image-slice.ts
+// src/css/property-descriptors/border-image-slice.ts
 const fillSides$1 = (sides) => {
 	const result = [...sides];
 	if (result.length === 1) {
@@ -6134,8 +6032,7 @@ const borderImageSlice = {
 		};
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/border-image-repeat.ts
+// src/css/property-descriptors/border-image-repeat.ts
 const parseRepeatValue = (value) => {
 	switch (value) {
 		case "repeat": return 1;
@@ -6160,8 +6057,7 @@ const borderImageRepeat = {
 		};
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/box-decoration-break.ts
+// src/css/property-descriptors/box-decoration-break.ts
 const boxDecorationBreak = {
 	name: "box-decoration-break",
 	initialValue: "slice",
@@ -6174,8 +6070,7 @@ const boxDecorationBreak = {
 		}
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/accent-color.ts
+// src/css/property-descriptors/accent-color.ts
 const accentColor = {
 	name: "accent-color",
 	initialValue: "auto",
@@ -6186,8 +6081,7 @@ const accentColor = {
 		return color$1.parse(context, token);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/webkit-text-fill-color.ts
+// src/css/property-descriptors/webkit-text-fill-color.ts
 const webkitTextFillColor = {
 	name: "-webkit-text-fill-color",
 	initialValue: "currentcolor",
@@ -6198,8 +6092,7 @@ const webkitTextFillColor = {
 		return color$1.parse(context, token);
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/isolation.ts
+// src/css/property-descriptors/isolation.ts
 const isolation = {
 	name: "isolation",
 	initialValue: "auto",
@@ -6209,8 +6102,52 @@ const isolation = {
 		return value === "isolate" ? 1 : 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/outline.ts
+// src/css/property-descriptors/will-change.ts
+const STACKING_HINTS = /* @__PURE__ */ new Set([
+	"transform",
+	"translate",
+	"rotate",
+	"scale",
+	"opacity",
+	"filter",
+	"backdrop-filter",
+	"mix-blend-mode",
+	"isolation",
+	"clip-path",
+	"mask",
+	"mask-image",
+	"mask-border",
+	"perspective",
+	"contain",
+	"offset-path",
+	"offset-distance",
+	"offset-rotate",
+	"top",
+	"left",
+	"bottom",
+	"right",
+	"z-index"
+]);
+const willChange = {
+	name: "will-change",
+	initialValue: "auto",
+	prefix: false,
+	type: 1,
+	parse: (_context, tokens) => {
+		return tokens.some((token) => isIdentToken(token) && STACKING_HINTS.has(token.value)) ? 1 : 0;
+	}
+};
+// src/css/property-descriptors/contain.ts
+const contain = {
+	name: "contain",
+	initialValue: "none",
+	prefix: false,
+	type: 2,
+	parse: (_context, value) => {
+		return /\b(paint|strict|content)\b/.test(value) ? 1 : 0;
+	}
+};
+// src/css/property-descriptors/outline.ts
 const outlineStyle = {
 	name: "outline-style",
 	initialValue: "none",
@@ -6253,8 +6190,7 @@ const outlineOffset = {
 		return isDimensionToken(token) || isNumberToken(token) ? token.number : 0;
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/backdrop-filter.ts
+// src/css/property-descriptors/backdrop-filter.ts
 const backdropFilter = {
 	name: "backdrop-filter",
 	initialValue: "none",
@@ -6262,8 +6198,7 @@ const backdropFilter = {
 	type: 1,
 	parse: (context, tokens) => filter.parse(context, tokens)
 };
-//#endregion
-//#region src/css/property-descriptors/mask.ts
+// src/css/property-descriptors/mask.ts
 const maskImage = {
 	name: "mask-image",
 	initialValue: "none",
@@ -6293,8 +6228,7 @@ const maskSize = {
 	type: 1,
 	parse: backgroundSize.parse
 };
-//#endregion
-//#region src/css/property-descriptors/text-emphasis.ts
+// src/css/property-descriptors/text-emphasis.ts
 const SHAPES = [
 	"dot",
 	"circle",
@@ -6369,8 +6303,7 @@ const textEmphasisPosition = {
 		};
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/border-image-width.ts
+// src/css/property-descriptors/border-image-width.ts
 const fillSides = (sides) => {
 	const result = [...sides];
 	if (result.length === 1) {
@@ -6467,8 +6400,7 @@ const borderImageOutset = {
 		};
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/webkit-box-reflect.ts
+// src/css/property-descriptors/webkit-box-reflect.ts
 /**
 * -webkit-box-reflect: <direction> <offset>? <mask-image>?
 *
@@ -6512,8 +6444,7 @@ const webkitBoxReflect = {
 		};
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/translate.ts
+// src/css/property-descriptors/translate.ts
 const translate = {
 	name: "translate",
 	initialValue: "none",
@@ -6526,8 +6457,7 @@ const translate = {
 		return [at(values, 0), values.length > 1 ? at(values, 1) : ZERO_LENGTH];
 	}
 };
-//#endregion
-//#region src/css/property-descriptors/scale.ts
+// src/css/property-descriptors/scale.ts
 const scale = {
 	name: "scale",
 	initialValue: "none",
@@ -6562,8 +6492,7 @@ const STYLESHEET_READY_TIMEOUT_MS = 1e4;
 * never fires, the mount is rejected instead of hanging forever.
 */
 const IFRAME_LOAD_WATCHDOG_MS = 6e4;
-//#endregion
-//#region src/css/parse.ts
+// src/css/parse.ts
 const STANDARD_PROPERTIES = [
 	[
 		"animationDuration",
@@ -7000,6 +6929,16 @@ const STANDARD_PROPERTIES = [
 		isolation,
 		"isolation"
 	],
+	[
+		"willChange",
+		willChange,
+		"will-change"
+	],
+	[
+		"contain",
+		contain,
+		"contain"
+	],
 	[
 		"outlineColor",
 		outlineColor,
@@ -7131,8 +7070,7 @@ const parse = (context, descriptor, style) => {
 	}
 	return result;
 };
-//#endregion
-//#region src/css/grouped/border-styles.ts
+// src/css/grouped/border-styles.ts
 /**
 * Read-only grouped accessor for border-related CSS properties.
 *
@@ -7209,8 +7147,7 @@ var BorderStyles = class {
 		return this.styles.boxShadow;
 	}
 };
-//#endregion
-//#region src/css/grouped/background-styles.ts
+// src/css/grouped/background-styles.ts
 /**
 * Read-only grouped accessor for background-related CSS properties.
 *
@@ -7248,8 +7185,7 @@ var BackgroundStyles = class {
 		return this.styles.backgroundBlendMode;
 	}
 };
-//#endregion
-//#region src/css/grouped/font-styles.ts
+// src/css/grouped/font-styles.ts
 /**
 * Read-only grouped accessor for font/text-related CSS properties.
 *
@@ -7344,8 +7280,7 @@ var FontStyles = class {
 		return this.styles.paintOrder;
 	}
 };
-//#endregion
-//#region src/css/grouped/layout-styles.ts
+// src/css/grouped/layout-styles.ts
 /**
 * Read-only grouped accessor for layout/display/positioning CSS properties.
 *
@@ -7473,8 +7408,7 @@ var LayoutStyles = class {
 		return this.styles.isInlineLevel();
 	}
 };
-//#endregion
-//#region src/css/index.ts
+// src/css/index.ts
 var CSSParsedDeclaration = class {
 	animationDuration;
 	backgroundClip;
@@ -7568,6 +7502,8 @@ var CSSParsedDeclaration = class {
 	accentColor;
 	webkitTextFillColor;
 	isolation;
+	willChange;
+	contain;
 	outlineColor;
 	outlineStyle;
 	outlineWidth;
@@ -7666,8 +7602,7 @@ var CSSParsedCounterDeclaration = class {
 		this.counterReset = parse(context, counterReset, declaration.counterReset);
 	}
 };
-//#endregion
-//#region src/core/debugger.ts
+// src/core/debugger.ts
 const elementDebuggerAttribute = "data-html2canvas-debug";
 const getElementDebugType = (element) => {
 	if (typeof element.getAttribute !== "function") return 0;
@@ -7683,8 +7618,7 @@ const isDebugging = (element, type) => {
 	const elementType = getElementDebugType(element);
 	return elementType === 1 || type === elementType;
 };
-//#endregion
-//#region src/dom/adopted-styles.ts
+// src/dom/adopted-styles.ts
 /**
 * Constructable stylesheet cloning (adoptedStyleSheets).
 *
@@ -7725,8 +7659,7 @@ const createAdoptedStylesElement = (styleDocument, sheets, nonce) => {
 	if (nonce) style.nonce = nonce;
 	return style;
 };
-//#endregion
-//#region src/dom/slot-cloner.ts
+// src/dom/slot-cloner.ts
 /** Exported for reuse in document-cloner.ts */
 const IGNORE_ATTRIBUTE = "data-html2canvas-ignore";
 /**
@@ -7863,8 +7796,7 @@ var SlotCloner = class {
 		if (style) target.appendChild(style);
 	}
 };
-//#endregion
-//#region src/dom/copy-css-styles.ts
+// src/dom/copy-css-styles.ts
 /**
 * Computed-style copying for cloned elements.
 *
@@ -7892,8 +7824,7 @@ const copyCSSStyles = (style, target) => {
 	if (parts.length > 0) target.style.cssText = parts.join(";") + ";";
 	return target;
 };
-//#endregion
-//#region src/dom/pseudo-content.ts
+// src/dom/pseudo-content.ts
 /**
 * Pseudo-element (::before / ::after) content resolution.
 *
@@ -7913,19 +7844,19 @@ const PSEUDO_HIDE_ELEMENT_STYLE = `{
 }`;
 /**
 * Inject the stylesheet that hides pseudo-element surrogate containers.
-* Called on the cloned <body> so the surrogates themselves never render.
+* Added to the cloned <head> so the surrogates themselves never render.
 */
-const createPseudoHideStyles = (body, cspNonce) => {
-	createStyles(body, `.${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}${PSEUDO_BEFORE}${PSEUDO_HIDE_ELEMENT_STYLE}
+const createPseudoHideStyles = (parent, cspNonce) => {
+	createStyles(parent, `.${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}${PSEUDO_BEFORE}${PSEUDO_HIDE_ELEMENT_STYLE}
          .${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}${PSEUDO_AFTER}${PSEUDO_HIDE_ELEMENT_STYLE}`, cspNonce);
 };
-const createStyles = (body, styles, cspNonce) => {
-	const document = body.ownerDocument;
+const createStyles = (parent, styles, cspNonce) => {
+	const document = parent.ownerDocument;
 	if (document) {
 		const style = document.createElement("style");
 		style.textContent = styles;
 		if (cspNonce) style.nonce = cspNonce;
-		body.appendChild(style);
+		parent.appendChild(style);
 	}
 };
 /**
@@ -7999,8 +7930,7 @@ var PseudoContentResolver = class {
 		return anonymousReplacedElement;
 	}
 };
-//#endregion
-//#region src/core/abort-helper.ts
+// src/core/abort-helper.ts
 /**
 * AbortSignal helper utilities.
 */
@@ -8015,8 +7945,7 @@ var PseudoContentResolver = class {
 const throwIfAborted = (signal) => {
 	if (signal?.aborted) throw new DOMException("The operation was aborted.", "AbortError");
 };
-//#endregion
-//#region src/dom/iframe-mount.ts
+// src/dom/iframe-mount.ts
 const trustedTypePolicies = /* @__PURE__ */ new WeakMap();
 /**
 * Resolve the Trusted Types policy used for writing the clone document.
@@ -8045,9 +7974,20 @@ const createIFrameContainer = (ownerDocument, bounds, customContainer) => {
 	cloneIframeContainer.style.position = "fixed";
 	cloneIframeContainer.style.left = "-10000px";
 	cloneIframeContainer.style.top = "0px";
-	cloneIframeContainer.style.border = "0";
 	cloneIframeContainer.width = bounds.width.toString();
 	cloneIframeContainer.height = bounds.height.toString();
+	const contentBox = [
+		["width", `${bounds.width}px`],
+		["height", `${bounds.height}px`],
+		["min-width", "0px"],
+		["max-width", "none"],
+		["min-height", "0px"],
+		["max-height", "none"],
+		["box-sizing", "content-box"],
+		["padding", "0px"],
+		["border", "0"]
+	];
+	for (const [property, value] of contentBox) cloneIframeContainer.style.setProperty(property, value, "important");
 	cloneIframeContainer.scrolling = "no";
 	cloneIframeContainer.setAttribute(IGNORE_ATTRIBUTE, "true");
 	(customContainer || ownerDocument.body).appendChild(cloneIframeContainer);
@@ -8180,6 +8120,11 @@ const stylesheetsReady = (documentClone, logger, signal, timeoutMs = STYLESHEET_
 		pending.push(new Promise((resolve) => {
 			let elapsed = 0;
 			const timer = setInterval(() => {
+				if (signal?.aborted) {
+					clearInterval(timer);
+					resolve();
+					return;
+				}
 				elapsed += 50;
 				const currentSheet = style.sheet;
 				if (currentSheet && isSheetFullyApplied(currentSheet) || elapsed >= timeoutMs) {
@@ -8350,8 +8295,7 @@ const mountCloneInIFrame = (context, ownerDocument, windowSize, mount) => {
 		throw error;
 	});
 };
-//#endregion
-//#region src/dom/document-cloner.ts
+// src/dom/document-cloner.ts
 /**
 * Find the parent ShadowRoot of an element, if any
 * @param element - The element to check
@@ -8396,6 +8340,7 @@ var DocumentCloner = class {
 		}
 		this.documentElement = this.cloneNode(element.ownerDocument.documentElement, false);
 		this.appendDocumentAdoptedStyles(element.ownerDocument);
+		this.appendPseudoHideStyles();
 	}
 	/**
 	* Re-materialise the source document's constructable stylesheets
@@ -8415,6 +8360,16 @@ var DocumentCloner = class {
 		const style = createAdoptedStylesElement(this.documentElement.ownerDocument ?? ownerDocument, sheets, this.options.cspNonce);
 		if (style) head.appendChild(style);
 	}
+	/**
+	* Add the rules that hide the source ::before / ::after (the clone draws
+	* them as surrogate elements) to the clone's <head>. Inside <body> the
+	* <style> would be one of its children, and `body > :first-child`,
+	* `:nth-child()` and sibling selectors would match the wrong elements.
+	*/
+	appendPseudoHideStyles() {
+		const head = this.documentElement.getElementsByTagName("head").item(0);
+		createPseudoHideStyles(head ?? this.documentElement, this.options.cspNonce);
+	}
 	toIFrame(ownerDocument, windowSize) {
 		return mountCloneInIFrame(this.context, ownerDocument, windowSize, {
 			documentElement: this.documentElement,
@@ -8550,7 +8505,6 @@ var DocumentCloner = class {
 			const style = window.getComputedStyle(node);
 			const checkPseudoElements = canHavePseudoElements(node);
 			if (this.referenceElement === node && isHTMLElementNode(clone)) this.clonedReferenceElement = clone;
-			if (isBodyElement(clone)) createPseudoHideStyles(clone, this.options.cspNonce);
 			const counters = this.counters.parse(new CSSParsedCounterDeclaration(this.context, style));
 			if (checkPseudoElements) {
 				const styleBefore = window.getComputedStyle(node, ":before");
@@ -8584,8 +8538,7 @@ var DocumentCloner = class {
 		return false;
 	}
 };
-//#endregion
-//#region src/dom/dom-normalizer.ts
+// src/dom/dom-normalizer.ts
 /**
 * Normalize element styles for accurate rendering
 * This includes disabling animations and neutralizing transforms.
@@ -8673,8 +8626,115 @@ var DOMNormalizer = class {
 		if (originalStyles.scale !== void 0) element.style.scale = originalStyles.scale;
 	}
 };
-//#endregion
-//#region src/dom/element-container.ts
+// src/dom/filter-reference.ts
+const SVG_NS$1 = "http://www.w3.org/2000/svg";
+const XLINK_NS = "http://www.w3.org/1999/xlink";
+const REGION_DEFAULTS = {
+	x: "-10%",
+	y: "-10%",
+	width: "120%",
+	height: "120%"
+};
+const PRESENTATION_PROPERTIES = [
+	"color-interpolation-filters",
+	"flood-color",
+	"flood-opacity",
+	"lighting-color"
+];
+const REFERENCE_RE = /^(["']?)(#[^"'\s()]+)\1$/;
+const URL_RE = /url\(\s*([^)]*?)\s*\)/g;
+/** The `#id` of a same-document url() body (`"#id"`, `'#id'` or `#id`), or null. */
+const parseFilterReference = (body) => {
+	const match = REFERENCE_RE.exec(body.trim());
+	return match ? match[2] : null;
+};
+/**
+* Resolve every same-document url() reference of a computed filter value.
+* References that cannot be expressed in the serialized SVG are left out, so
+* the compositor rejects the chain and the subtree keeps the legacy renderer.
+*/
+function resolveFilterReferences(element, filter, box) {
+	if (!filter || filter.indexOf("url(") === -1) return void 0;
+	const references = /* @__PURE__ */ new Map();
+	const seen = /* @__PURE__ */ new Set();
+	for (const match of filter.matchAll(URL_RE)) {
+		const ref = parseFilterReference(match[1]);
+		if (!ref || seen.has(ref)) continue;
+		seen.add(ref);
+		const reference = resolveFilterReference(element.ownerDocument, ref, box);
+		if (reference) references.set(ref, reference);
+	}
+	return references;
+}
+function resolveFilterReference(document, ref, box) {
+	const source = document.getElementById(ref.slice(1));
+	if (!source || source.namespaceURI !== SVG_NS$1 || source.localName !== "filter") return null;
+	if (!isSelfContained(source)) return null;
+	const region = filterRegion(source, box);
+	if (!region) return null;
+	const copy = source.cloneNode(true);
+	inlinePresentation(source, copy);
+	copy.removeAttribute("id");
+	copy.setAttribute("filterUnits", "userSpaceOnUse");
+	Object.keys(region).forEach((name) => copy.setAttribute(name, String(region[name])));
+	const outset = Math.max(0, -region.x, -region.y, region.x + region.width - box.width, region.y + region.height - box.height);
+	return {
+		element: copy,
+		region,
+		outset: Math.ceil(outset)
+	};
+}
+const hasHref = (node) => node.hasAttribute("href") || node.hasAttributeNS(XLINK_NS, "href");
+function isSelfContained(source) {
+	if (source.getAttribute("primitiveUnits") === "objectBoundingBox" || hasHref(source)) return false;
+	for (const primitive of Array.from(source.querySelectorAll("*"))) {
+		if (primitive.localName === "feImage" || hasHref(primitive)) return false;
+		for (const name of [
+			"x",
+			"y",
+			"width",
+			"height"
+		]) if ((primitive.getAttribute(name) ?? "").indexOf("%") !== -1) return false;
+	}
+	return true;
+}
+function filterRegion(source, box) {
+	const boundingBox = source.getAttribute("filterUnits") !== "userSpaceOnUse";
+	const read = (name, size) => {
+		const raw = (source.getAttribute(name) ?? (boundingBox ? REGION_DEFAULTS[name] : "")).trim();
+		if (raw === "") return null;
+		const percentage = raw.endsWith("%");
+		const value = Number(percentage ? raw.slice(0, -1) : raw.replace(/px$/, ""));
+		if (!Number.isFinite(value)) return null;
+		if (boundingBox) return (percentage ? value / 100 : value) * size;
+		return percentage ? null : value;
+	};
+	const x = read("x", box.width);
+	const y = read("y", box.height);
+	const width = read("width", box.width);
+	const height = read("height", box.height);
+	if (x === null || y === null || width === null || height === null || width <= 0 || height <= 0) return null;
+	return {
+		x,
+		y,
+		width,
+		height
+	};
+}
+function inlinePresentation(source, copy) {
+	const view = source.ownerDocument.defaultView;
+	if (!view) return;
+	const sources = [source, ...Array.from(source.querySelectorAll("*"))];
+	const copies = [copy, ...Array.from(copy.querySelectorAll("*"))];
+	sources.forEach((node, index) => {
+		const style = view.getComputedStyle(node);
+		for (const property of PRESENTATION_PROPERTIES) {
+			const value = style.getPropertyValue(property);
+			if (value) copies[index]?.setAttribute(property, value);
+		}
+	});
+}
+// src/dom/element-container.ts
 var ElementContainer = class {
 	context;
 	styles;
@@ -8687,6 +8747,11 @@ var ElementContainer = class {
 	* bounds to leave a matching gap (issue #227).
 	*/
 	legendBounds;
+	/**
+	* Same-document `filter: url(#id)` references, resolved while the cloned
+	* DOM is available. The surface compositor renders them in an SVG pass.
+	*/
+	filterReferences;
 	createsStackingContext = false;
 	createsRealStackingContext = false;
 	isListOwner = false;
@@ -8711,6 +8776,7 @@ var ElementContainer = class {
 				this.bounds = new Bounds(this.bounds.left, borderBoxTop, this.bounds.width, this.bounds.height - (borderBoxTop - this.bounds.top));
 			}
 		}
+		this.filterReferences = resolveFilterReferences(element, this.styles.filter, this.bounds);
 		if (isDebugging(element, 4)) this.debugRender = true;
 	}
 	/**
@@ -8733,8 +8799,7 @@ var ElementContainer = class {
 		for (const child of this.elements) child.restoreTree();
 	}
 };
-//#endregion
-//#region src/core/features.ts
+// src/core/features.ts
 /**
 * Runtime feature detection.
 *
@@ -8820,8 +8885,7 @@ const FEATURES = {
 		return value;
 	}
 };
-//#endregion
-//#region src/css/layout/text.ts
+// src/css/layout/text.ts
 var TextBounds = class {
 	text;
 	bounds;
@@ -8896,8 +8960,7 @@ const breakText = (value, styles) => {
 	if (isVerticalWritingMode(styles.writingMode)) return segmentGraphemes(value);
 	return styles.letterSpacing !== 0 ? segmentGraphemes(value) : segmentWords(value);
 };
-//#endregion
-//#region src/dom/text-container.ts
+// src/dom/text-container.ts
 var TextContainer = class {
 	text;
 	textBounds;
@@ -8920,8 +8983,7 @@ const capitalize = (m, p1, p2) => {
 	if (m.length > 0) return p1 + p2.toUpperCase();
 	return m;
 };
-//#endregion
-//#region src/dom/replaced-elements/image-element-container.ts
+// src/dom/replaced-elements/image-element-container.ts
 var ImageElementContainer = class extends ElementContainer {
 	src;
 	intrinsicWidth;
@@ -8934,8 +8996,7 @@ var ImageElementContainer = class extends ElementContainer {
 		this.context.cache.addImage(this.src);
 	}
 };
-//#endregion
-//#region src/dom/replaced-elements/canvas-element-container.ts
+// src/dom/replaced-elements/canvas-element-container.ts
 var CanvasElementContainer = class extends ElementContainer {
 	canvas;
 	intrinsicWidth;
@@ -8947,8 +9008,7 @@ var CanvasElementContainer = class extends ElementContainer {
 		this.intrinsicHeight = canvas.height;
 	}
 };
-//#endregion
-//#region src/dom/replaced-elements/svg-element-container.ts
+// src/dom/replaced-elements/svg-element-container.ts
 const BOX_OFFSET_PROPERTIES = [
 	"position",
 	"inset",
@@ -8998,8 +9058,7 @@ var SVGElementContainer = class extends ElementContainer {
 		this.context.cache.addImage(this.svg);
 	}
 };
-//#endregion
-//#region src/dom/elements/li-element-container.ts
+// src/dom/elements/li-element-container.ts
 var LIElementContainer = class extends ElementContainer {
 	value;
 	constructor(context, element, options = {}) {
@@ -9007,8 +9066,7 @@ var LIElementContainer = class extends ElementContainer {
 		this.value = element.value;
 	}
 };
-//#endregion
-//#region src/dom/elements/ol-element-container.ts
+// src/dom/elements/ol-element-container.ts
 var OLElementContainer = class extends ElementContainer {
 	start;
 	reversed;
@@ -9018,8 +9076,7 @@ var OLElementContainer = class extends ElementContainer {
 		this.reversed = typeof element.reversed === "boolean" && element.reversed === true;
 	}
 };
-//#endregion
-//#region src/dom/replaced-elements/input-element-container.ts
+// src/dom/replaced-elements/input-element-container.ts
 const CHECKBOX_BORDER_RADIUS = [{
 	type: 15,
 	flags: 0,
@@ -9074,8 +9131,7 @@ var InputElementContainer = class extends ElementContainer {
 		}
 	}
 };
-//#endregion
-//#region src/dom/elements/select-element-container.ts
+// src/dom/elements/select-element-container.ts
 var SelectElementContainer = class extends ElementContainer {
 	value;
 	constructor(context, element, options = {}) {
@@ -9084,8 +9140,7 @@ var SelectElementContainer = class extends ElementContainer {
 		this.value = option ? option.text || "" : "";
 	}
 };
-//#endregion
-//#region src/dom/elements/textarea-element-container.ts
+// src/dom/elements/textarea-element-container.ts
 var TextareaElementContainer = class extends ElementContainer {
 	value;
 	constructor(context, element, options = {}) {
@@ -9093,8 +9148,7 @@ var TextareaElementContainer = class extends ElementContainer {
 		this.value = element.value;
 	}
 };
-//#endregion
-//#region src/dom/replaced-elements/iframe-element-container.ts
+// src/dom/replaced-elements/iframe-element-container.ts
 var IFrameElementContainer = class extends ElementContainer {
 	src;
 	width;
@@ -9125,8 +9179,7 @@ var IFrameElementContainer = class extends ElementContainer {
 		}
 	}
 };
-//#endregion
-//#region src/dom/node-parser.ts
+// src/dom/node-parser.ts
 const LIST_OWNERS = [
 	"OL",
 	"UL",
@@ -9192,15 +9245,14 @@ const parseTree = (context, element, options = {}) => {
 	return container;
 };
 const createsRealStackingContext = (node, container, root) => {
-	return container.styles.isPositionedWithZIndex() || container.styles.opacity < 1 || Boolean(container.styles.filter) || Boolean(container.styles.backdropFilter) || container.styles.maskImage.length > 0 || Boolean(container.styles.webkitBoxReflect) || container.styles.isolation === 1 || container.styles.isTransformed() || isBodyElement(node) && root.styles.isTransparent();
+	return container.styles.isPositionedWithZIndex() || container.styles.opacity < 1 || Boolean(container.styles.filter) || Boolean(container.styles.backdropFilter) || container.styles.maskImage.length > 0 || Boolean(container.styles.webkitBoxReflect) || container.styles.isolation === 1 || container.styles.willChange === 1 || container.styles.contain === 1 || container.styles.isTransformed() || isBodyElement(node) && root.styles.isTransparent();
 };
 const createsStackingContext = (styles) => {
 	if (styles.isPositioned() || styles.isFloating()) return true;
 	if (styles.mixBlendMode !== MIX_BLEND_MODE$1.NORMAL) return true;
 	return contains(styles.display, 268435456) || contains(styles.display, 33554432) || contains(styles.display, 536870912) || contains(styles.display, 134217728);
 };
-//#endregion
-//#region src/render/path.ts
+// src/render/path.ts
 const equalPath = (a, b) => {
 	if (a.length === b.length) return a.some((v, i) => v === b[i]);
 	return false;
@@ -9216,8 +9268,7 @@ const transformPath = (path, deltaX, deltaY, deltaW, deltaH) => {
 		return point;
 	});
 };
-//#endregion
-//#region src/render/vector.ts
+// src/render/vector.ts
 var Vector = class Vector {
 	type;
 	x;
@@ -9231,8 +9282,7 @@ var Vector = class Vector {
 		return new Vector(this.x + deltaX, this.y + deltaY);
 	}
 };
-//#endregion
-//#region src/render/bezier-curve.ts
+// src/render/bezier-curve.ts
 const lerp = (a, b, t) => {
 	return new Vector(a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t);
 };
@@ -9266,8 +9316,7 @@ var BezierCurve = class BezierCurve {
 	}
 };
 const isBezierCurve = (path) => path.type === 1;
-//#endregion
-//#region src/render/bound-curves.ts
+// src/render/bound-curves.ts
 var BoundCurves = class {
 	topLeftBorderDoubleOuterBox;
 	topRightBorderDoubleOuterBox;
@@ -9391,8 +9440,7 @@ const calculatePaddingBoxPath = (curves) => {
 		curves.bottomLeftPaddingBox
 	];
 };
-//#endregion
-//#region src/render/effects.ts
+// src/render/effects.ts
 var TransformEffect = class {
 	offsetX;
 	offsetY;
@@ -9599,8 +9647,7 @@ const isOpacityEffect = (effect) => effect.type === 2;
 const isClipPathEffect = (effect) => effect.type === 3;
 const isBlendEffect = (effect) => effect.type === 4;
 const isFilterEffect = (effect) => effect.type === 5;
-//#endregion
-//#region src/render/stacking-context.ts
+// src/render/stacking-context.ts
 var StackingContext = class {
 	element;
 	negativeZIndex;
@@ -9923,8 +9970,7 @@ const parseStackingContexts = (container) => {
 	processListItems(paintContainer.container, listItems);
 	return root;
 };
-//#endregion
-//#region src/render/canvas/gradient-rasterizer.ts
+// src/render/canvas/gradient-rasterizer.ts
 const clampStop = (stop) => Math.min(1, Math.max(0, stop));
 /**
 * Stack the one-cycle stop list periodically across [0, 1]. Returns null for
@@ -10003,8 +10049,7 @@ const rasterizeRadialGradient = (ownerDocument, rx, ry, stops, repeating = false
 		ry
 	};
 };
-//#endregion
-//#region src/render/box-sizing.ts
+// src/render/box-sizing.ts
 const paddingBox = (element) => {
 	const bounds = element.bounds;
 	const styles = element.styles;
@@ -10019,8 +10064,7 @@ const contentBox = (element) => {
 	const paddingBottom = getAbsoluteValue(styles.paddingBottom, bounds.width);
 	return bounds.add(paddingLeft + styles.borderLeftWidth, paddingTop + styles.borderTopWidth, -(styles.borderRightWidth + styles.borderLeftWidth + paddingLeft + paddingRight), -(styles.borderTopWidth + styles.borderBottomWidth + paddingTop + paddingBottom));
 };
-//#endregion
-//#region src/render/background.ts
+// src/render/background.ts
 const calculateBackgroundPositioningArea = (backgroundOrigin, element) => {
 	if (backgroundOrigin === 0) return element.bounds;
 	if (backgroundOrigin === 2) return contentBox(element);
@@ -10121,8 +10165,7 @@ const calculateBackgroundRepeatPath = (repeat, [x, y], [width, height], backgrou
 		];
 	}
 };
-//#endregion
-//#region src/render/canvas/filter-surface.ts
+// src/render/canvas/filter-surface.ts
 var FilterSurfaceError = class extends Error {};
 const releaseSurface = (canvas) => {
 	canvas.width = canvas.height = 0;
@@ -10226,6 +10269,13 @@ const parseFilterFunction = (name, body) => {
 			value: Number.parseFloat(numeric) * (percentage ? 1 / 100 : 1)
 		};
 	}
+	if (name === "url") {
+		const ref = parseFilterReference(body);
+		return ref ? {
+			kind: "url",
+			ref
+		} : null;
+	}
 	return null;
 };
 /** Split on whitespace outside parentheses so rgba(...) colours stay one token. */
@@ -10281,22 +10331,25 @@ const nativeFilterString = (filter, scale) => filter.functions.map((fn) => {
 		case "blur": return `blur(${fn.value * scale}px)`;
 		case "drop-shadow": return `drop-shadow(${fn.x * scale}px ${fn.y * scale}px ${fn.blur * scale}px ${fn.color})`;
 		case "unitless": return fn.name === "hue-rotate" ? `hue-rotate(${fn.value}deg)` : `${fn.name}(${fn.value})`;
+		case "url": return `url("${fn.ref}")`;
 	}
 }).join(" ");
 /**
 * Outset (in CSS pixels) a surface must grow so blur/shadow spillover is not
 * cropped. Unitless functions never spread beyond the bounds. Consecutive
-* blurs compound, so their radii sum.
+* blurs compound, so their radii sum. A url() reference can paint up to its
+* filter region, which may extend beyond the border box.
 */
-function filterOutset(filter) {
+function filterOutset(filter, references) {
 	let blurSum = 0;
 	let maxShadowOffset = 0;
+	let referenceOutset = 0;
 	for (const fn of filter.functions) if (fn.kind === "blur") blurSum += fn.value;
 	else if (fn.kind === "drop-shadow") {
 		blurSum += fn.blur;
 		maxShadowOffset = Math.max(maxShadowOffset, Math.abs(fn.x), Math.abs(fn.y));
-	}
-	return Math.ceil(3 * blurSum + maxShadowOffset);
+	} else if (fn.kind === "url") referenceOutset += references?.get(fn.ref)?.outset ?? 0;
+	return Math.ceil(3 * blurSum + maxShadowOffset + referenceOutset);
 }
 function canvasLike(source) {
 	const canvas = (source.ownerDocument ?? document).createElement("canvas");
@@ -10392,8 +10445,9 @@ const isSvgExpressible = (filter) => {
 	if (blurs > 0 && shadows > 0) return filter.functions.findIndex((fn) => fn.kind === "blur") < filter.functions.findIndex((fn) => fn.kind === "drop-shadow");
 	return true;
 };
-async function renderFilterSurface(source, filter, opacity, scale, signal) {
+async function renderFilterSurface(source, filter, opacity, scale, signal, references) {
 	throwIfAborted(signal);
+	if (filter.functions.some((fn) => fn.kind === "url")) return renderReferencedFilterSurface(source, filter, opacity, scale, signal, references);
 	if (filter.functions.length > 0 && supportsNativeFilters(source.ownerDocument ?? document)) {
 		const output = tryNativeFilterSurface(source, filter, opacity, scale, signal);
 		if (output) return output;
@@ -10401,6 +10455,136 @@ async function renderFilterSurface(source, filter, opacity, scale, signal) {
 	if (!isSvgExpressible(filter)) throw new FilterSurfaceError("Filter chain requires native canvas filters");
 	return renderSvgFilterSurface(source, filter, opacity, scale, signal);
 }
+/**
+* Split a chain at its url() references: each reference is one SVG pass, and
+* the standard functions between them run through the usual backends. Every
+* step filters the previous step's complete output at alpha 1, then CSS
+* opacity is applied once, as for any other chain.
+*/
+async function renderReferencedFilterSurface(source, filter, opacity, scale, signal, context) {
+	const steps = [];
+	for (const fn of filter.functions) {
+		if (fn.kind === "url") {
+			const reference = context?.references?.get(fn.ref);
+			if (!reference) throw new FilterSurfaceError(`Filter reference ${fn.ref} cannot be resolved`);
+			steps.push(reference);
+			continue;
+		}
+		const last = steps[steps.length - 1];
+		if (Array.isArray(last)) last.push(fn);
+		else steps.push([fn]);
+	}
+	const origin = context?.origin ?? {
+		x: 0,
+		y: 0
+	};
+	const last = steps[steps.length - 1];
+	const opacityApplied = Array.isArray(last);
+	let current = source;
+	try {
+		for (const step of steps) {
+			const next = Array.isArray(step) ? await renderFilterSurface(current, { functions: step }, step === last ? opacity : 1, scale, signal) : await renderReferenceSurface(current, step, origin, scale, signal);
+			if (current !== source) releaseSurface(current);
+			current = next;
+		}
+		if (opacityApplied || opacity === 1) {
+			const output = current;
+			current = source;
+			return output;
+		}
+		return drawWithOpacity(current, opacity);
+	} finally {
+		if (current !== source) releaseSurface(current);
+	}
+}
+function drawWithOpacity(source, opacity) {
+	const output = canvasLike(source);
+	const context = output.getContext("2d");
+	if (!context) {
+		releaseSurface(output);
+		throw new FilterSurfaceError("Filter surface canvas is unavailable");
+	}
+	context.globalAlpha = opacity;
+	try {
+		context.drawImage(source, 0, 0);
+		return output;
+	} catch {
+		releaseSurface(output);
+		throw new FilterSurfaceError("Filter surface image cannot be drawn");
+	}
+}
+const SVG_NS = "http://www.w3.org/2000/svg";
+function createSvgElement(owner, tag, attributes = {}) {
+	const node = owner.createElementNS(SVG_NS, tag);
+	Object.entries(attributes).forEach(([key, value]) => node.setAttribute(key, String(value)));
+	return node;
+}
+function serializeSurface(source) {
+	try {
+		const url = source.toDataURL("image/png");
+		if (url === "data:,") throw new Error("Canvas size is unsupported");
+		return url;
+	} catch {
+		throw new FilterSurfaceError("Filter surface pixels cannot be serialized");
+	}
+}
+/** Decode a filtered SVG image and draw it onto a surface-sized canvas. */
+async function drawSvgSurface(svg, source, opacity, signal) {
+	const imageWindow = (source.ownerDocument ?? document).defaultView;
+	const image = imageWindow?.Image ? new imageWindow.Image() : new Image();
+	let output;
+	try {
+		image.src = `data:image/svg+xml,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;
+		await decodeSurface(image, signal);
+		throwIfAborted(signal);
+		output = canvasLike(source);
+		const context = output.getContext("2d");
+		if (!context) throw new FilterSurfaceError("Filter surface canvas is unavailable");
+		context.globalAlpha = opacity;
+		context.drawImage(image, 0, 0);
+		return output;
+	} catch (error) {
+		if (output) releaseSurface(output);
+		if (signal?.aborted) throwIfAborted(signal);
+		throw error instanceof FilterSurfaceError ? error : new FilterSurfaceError("Filter surface image cannot be drawn");
+	} finally {
+		image.removeAttribute("src");
+	}
+}
+/**
+* Apply a referenced SVG filter to the complete surface. The viewBox is in CSS
+* pixels, so the filter's user units scale with the capture, and the image is
+* placed so user space starts at the element's border box, as it does for the
+* live element. Canvas filters cannot express either: their lengths are in
+* device pixels and their bounding box is the whole canvas.
+*/
+async function renderReferenceSurface(source, reference, origin, scale, signal) {
+	throwIfAborted(signal);
+	const owner = source.ownerDocument ?? document;
+	const width = source.width / scale;
+	const height = source.height / scale;
+	const svg = createSvgElement(owner, "svg", {
+		width: source.width,
+		height: source.height,
+		viewBox: `0 0 ${width} ${height}`
+	});
+	const defs = createSvgElement(owner, "defs");
+	const filterElement = owner.importNode(reference.element, true);
+	filterElement.setAttribute("id", "composited-reference");
+	defs.appendChild(filterElement);
+	svg.appendChild(defs);
+	const group = createSvgElement(owner, "g", { transform: `translate(${origin.x} ${origin.y})` });
+	group.appendChild(createSvgElement(owner, "image", {
+		x: -origin.x,
+		y: -origin.y,
+		width,
+		height,
+		href: serializeSurface(source),
+		filter: "url(#composited-reference)"
+	}));
+	svg.appendChild(group);
+	return drawSvgSurface(svg, source, 1, signal);
+}
 async function renderSvgFilterSurface(source, filter, opacity, scale, signal) {
 	throwIfAborted(signal);
 	const blur = filter.functions.find((fn) => fn.kind === "blur");
@@ -10412,29 +10596,9 @@ async function renderSvgFilterSurface(source, filter, opacity, scale, signal) {
 		blur: shadow.blur,
 		color: shadow.color
 	} : void 0;
-	if (!blurValue && !shadowValue) {
-		const output = canvasLike(source);
-		const context = output.getContext("2d");
-		if (!context) {
-			releaseSurface(output);
-			throw new FilterSurfaceError("Filter surface canvas is unavailable");
-		}
-		context.globalAlpha = opacity;
-		try {
-			context.drawImage(source, 0, 0);
-			return output;
-		} catch {
-			releaseSurface(output);
-			throw new FilterSurfaceError("Filter surface image cannot be drawn");
-		}
-	}
-	const namespace = "http://www.w3.org/2000/svg";
+	if (!blurValue && !shadowValue) return drawWithOpacity(source, opacity);
 	const svgDocument = source.ownerDocument ?? document;
-	const element = (tag, attributes = {}) => {
-		const node = svgDocument.createElementNS(namespace, tag);
-		Object.entries(attributes).forEach(([key, value]) => node.setAttribute(key, String(value)));
-		return node;
-	};
+	const element = (tag, attributes = {}) => createSvgElement(svgDocument, tag, attributes);
 	const svg = element("svg", {
 		width: source.width,
 		height: source.height,
@@ -10476,39 +10640,13 @@ async function renderSvgFilterSurface(source, filter, opacity, scale, signal) {
 	}
 	defs.appendChild(filterElement);
 	svg.appendChild(defs);
-	let sourceUrl;
-	try {
-		sourceUrl = source.toDataURL("image/png");
-		if (sourceUrl === "data:,") throw new Error("Canvas size is unsupported");
-	} catch {
-		throw new FilterSurfaceError("Filter surface pixels cannot be serialized");
-	}
 	svg.appendChild(element("image", {
 		width: source.width,
 		height: source.height,
-		href: sourceUrl,
+		href: serializeSurface(source),
 		filter: "url(#composited-filter)"
 	}));
-	const imageWindow = svgDocument.defaultView;
-	const image = imageWindow?.Image ? new imageWindow.Image() : new Image();
-	let output;
-	try {
-		image.src = `data:image/svg+xml,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;
-		await decodeSurface(image, signal);
-		throwIfAborted(signal);
-		output = canvasLike(source);
-		const context = output.getContext("2d");
-		if (!context) throw new FilterSurfaceError("Filter surface canvas is unavailable");
-		context.globalAlpha = opacity;
-		context.drawImage(image, 0, 0);
-		return output;
-	} catch (error) {
-		if (output) releaseSurface(output);
-		if (signal?.aborted) throwIfAborted(signal);
-		throw error instanceof FilterSurfaceError ? error : new FilterSurfaceError("Filter surface image cannot be drawn");
-	} finally {
-		image.removeAttribute("src");
-	}
+	return drawSvgSurface(svg, source, opacity, signal);
 }
 function reserveSurface(budget, width, height) {
 	const pixels = width * height * 4;
@@ -10532,7 +10670,7 @@ function surfaceBounds(container) {
 	}
 	for (const child of container.elements) if (child.styles.isVisible()) bounds = union(bounds, surfaceBounds(child));
 	const filter = parseFilterChain(styles.filter);
-	return expand(bounds, filter ? filterOutset(filter) : 0);
+	return expand(bounds, filter ? filterOutset(filter, container.filterReferences) : 0);
 }
 function cropSurface(bounds, viewport, margin, scale) {
 	const area = expand(viewport, margin);
@@ -10542,8 +10680,91 @@ function cropSurface(bounds, viewport, margin, scale) {
 	const bottom = Math.ceil(Math.min(bounds.top + bounds.height, area.top + area.height) * scale) / scale;
 	return new Bounds(left, top, Math.max(0, right - left), Math.max(0, bottom - top));
 }
-//#endregion
-//#region src/render/canvas/text/text-decoration-renderer.ts
+// src/render/matrix.ts
+/**
+* 2D affine matrix utilities for the composited-surface render path.
+*
+* Matrices use the canvas `transform(a, b, c, d, e, f)` column-vector
+* convention:
+*
+*     | a c e |       | x' |   | a·x + c·y + e |
+*     | b d f |  ×    | y' | = | b·x + d·y + f |
+*     | 0 0 1 |       |  1 |   |       1       |
+*
+* `TransformEffect` carries the same tuple order, so effects and bounds can
+* share these helpers. Composition follows the canvas post-multiply rule:
+* `multiplyMatrix(ancestor, own)` equals `ancestor` followed by `own`.
+*/
+const IDENTITY_MATRIX = [
+	1,
+	0,
+	0,
+	1,
+	0,
+	0
+];
+const isIdentityMatrix = (m) => m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1 && m[4] === 0 && m[5] === 0;
+/**
+* Compose two transforms: the result applies `a` first, then `b`
+* (canvas post-multiply, matching successive `ctx.transform` calls).
+*/
+const multiplyMatrix = (a, b) => [
+	a[0] * b[0] + a[2] * b[1],
+	a[1] * b[0] + a[3] * b[1],
+	a[0] * b[2] + a[2] * b[3],
+	a[1] * b[2] + a[3] * b[3],
+	a[0] * b[4] + a[2] * b[5] + a[4],
+	a[1] * b[4] + a[3] * b[5] + a[5]
+];
+/** Apply a matrix to a point, returning the mapped [x, y]. */
+const applyMatrixToPoint = (m, x, y) => [m[0] * x + m[2] * y + m[4], m[1] * x + m[3] * y + m[5]];
+/**
+* Map a layout-space Bounds through the matrix and return the axis-aligned
+* bounding box of the four transformed corners. Non-uniform scales and
+* rotations grow the box; this is intentionally conservative.
+*/
+const transformBoundsToAabb = (m, bounds) => {
+	const corners = [
+		applyMatrixToPoint(m, bounds.left, bounds.top),
+		applyMatrixToPoint(m, bounds.left + bounds.width, bounds.top),
+		applyMatrixToPoint(m, bounds.left, bounds.top + bounds.height),
+		applyMatrixToPoint(m, bounds.left + bounds.width, bounds.top + bounds.height)
+	];
+	const left = Math.min(...corners.map((p) => p[0]));
+	const right = Math.max(...corners.map((p) => p[0]));
+	const top = Math.min(...corners.map((p) => p[1]));
+	const bottom = Math.max(...corners.map((p) => p[1]));
+	return new Bounds(left, top, right - left, bottom - top);
+};
+/**
+* Invert an affine matrix. Returns null for singular matrices
+* (zero-scale transforms have no meaningful inverse).
+*/
+const invertMatrix = (m) => {
+	const det = m[0] * m[3] - m[1] * m[2];
+	if (!Number.isFinite(det) || det === 0) return null;
+	const invDet = 1 / det;
+	return [
+		m[3] * invDet,
+		-m[1] * invDet,
+		-m[2] * invDet,
+		m[0] * invDet,
+		(m[2] * m[5] - m[3] * m[4]) * invDet,
+		(m[1] * m[4] - m[0] * m[5]) * invDet
+	];
+};
+/**
+* Map a visual-space viewport back into the layout space of `m`'s inputs.
+* Used where a crop window (visual coordinates) must select content measured
+* in layout coordinates: the conservative answer is the AABB of the inverse
+* viewport corners.
+*/
+const inverseTransformBoundsToAabb = (m, bounds) => {
+	const inverse = invertMatrix(m);
+	if (!inverse) return null;
+	return transformBoundsToAabb(inverse, bounds);
+};
+// src/render/canvas/text/text-decoration-renderer.ts
 var TextDecorationRenderer = class {
 	ctx;
 	constructor(ctx) {
@@ -10631,8 +10852,7 @@ var TextDecorationRenderer = class {
 		this.ctx.restore();
 	}
 };
-//#endregion
-//#region src/render/canvas/font-utils.ts
+// src/render/canvas/font-utils.ts
 /**
 * Font measurement utility
 *
@@ -10667,8 +10887,7 @@ const measureFontMetrics = (ctx, fallback) => {
 const measureBaseline = (ctx, fallback) => {
 	return measureFontMetrics(ctx, fallback).baseline;
 };
-//#endregion
-//#region src/render/canvas/text-renderer.ts
+// src/render/canvas/text-renderer.ts
 const TEXT_OVERFLOW_EPSILON = 1;
 /**
 * Detect CJK (Chinese, Japanese, Korean) characters in a string.
@@ -11094,8 +11313,7 @@ var TextRenderer = class {
 		}
 	}
 };
-//#endregion
-//#region src/render/canvas/canvas-path.ts
+// src/render/canvas/canvas-path.ts
 const formatCanvasPath = (ctx, paths) => {
 	paths.forEach((point, index) => {
 		const start = isBezierCurve(point) ? point.start : point;
@@ -11109,8 +11327,7 @@ const createCanvasPath = (ctx, paths) => {
 	formatCanvasPath(ctx, paths);
 	ctx.closePath();
 };
-//#endregion
-//#region src/core/lru-map.ts
+// src/core/lru-map.ts
 /**
 * Generic LRU (Least-Recently-Used) wrapper over a native `Map`.
 *
@@ -11168,8 +11385,7 @@ var LRUMap = class {
 		this._map.clear();
 	}
 };
-//#endregion
-//#region src/render/canvas/background-renderer.ts
+// src/render/canvas/background-renderer.ts
 /**
 * Background Renderer
 *
@@ -11532,8 +11748,7 @@ var BackgroundRenderer = class {
 		createCanvasPath(this.ctx, paths);
 	}
 };
-//#endregion
-//#region src/render/border.ts
+// src/render/border.ts
 const parsePathForBorder = (curves, borderSide) => {
 	switch (borderSide) {
 		case 0: return createPathFromCurves(curves.topLeftBorderBox, curves.topLeftPaddingBox, curves.topRightBorderBox, curves.topRightPaddingBox);
@@ -11586,8 +11801,7 @@ const createPathFromCurves = (outer1, inner1, outer2, inner2) => {
 	else path.push(inner1);
 	return path;
 };
-//#endregion
-//#region src/render/canvas/border-renderer.ts
+// src/render/canvas/border-renderer.ts
 /**
 * Border Renderer
 *
@@ -11721,8 +11935,7 @@ var BorderRenderer = class {
 		this.ctx.restore();
 	}
 };
-//#endregion
-//#region src/render/canvas/border-image-renderer.ts
+// src/render/canvas/border-image-renderer.ts
 /**
 * Resolve border-image-width to per-side pixel widths. `auto` uses the
 * corresponding border width, numbers multiply it, lengths are absolute and
@@ -11930,8 +12143,7 @@ var BorderImageRenderer = class {
 		this.ctx.restore();
 	}
 };
-//#endregion
-//#region src/render/canvas/effects-renderer.ts
+// src/render/canvas/effects-renderer.ts
 /**
 * Effects Renderer
 *
@@ -12079,8 +12291,7 @@ var EffectsRenderer = class {
 		return this.activeEffects.length > 0;
 	}
 };
-//#endregion
-//#region src/render/canvas/mask-renderer.ts
+// src/render/canvas/mask-renderer.ts
 /**
 * Mask Renderer
 *
@@ -12227,8 +12438,7 @@ const paintMaskLayers = async (ctx, layers, styles, area, matchImage) => {
 		} else paintGradientLayer(ctx, layer, area);
 	}
 };
-//#endregion
-//#region src/render/object-fit.ts
+// src/render/object-fit.ts
 const calculateObjectFitRendering = (intrinsicWidth, intrinsicHeight, box, objectFit, objectPosition) => {
 	let sx = 0;
 	let sy = 0;
@@ -12314,8 +12524,7 @@ const calculateObjectFitRendering = (intrinsicWidth, intrinsicHeight, box, objec
 		dh
 	};
 };
-//#endregion
-//#region src/render/canvas/content-renderer.ts
+// src/render/canvas/content-renderer.ts
 /**
 * Render replaced elements: Image, Canvas, SVG, IFrame.
 */
@@ -12536,8 +12745,7 @@ const canvasTextAlign = (textAlign) => {
 		default: return "left";
 	}
 };
-//#endregion
-//#region src/render/canvas/box-shadow-geometry.ts
+// src/render/canvas/box-shadow-geometry.ts
 const shadowRadius = (radius, spread) => {
 	const delta = spread > radius ? spread * (1 + Math.pow(radius / spread - 1, 3)) : spread;
 	return Math.max(0, radius + delta);
@@ -12581,8 +12789,7 @@ const spreadShadowPath = (paths, spread) => {
 		return new BezierCurve(resize(point.start), resize(point.startControl), resize(point.endControl), resize(point.end));
 	});
 };
-//#endregion
-//#region src/render/canvas/box-shadow-transform.ts
+// src/render/canvas/box-shadow-transform.ts
 const shadowSpace = (matrix, width, height) => {
 	const { a, b, c, d, e, f } = matrix;
 	if (![
@@ -12625,8 +12832,7 @@ const shadowSpace = (matrix, width, height) => {
 		uniform: Math.abs(xx - yy) <= tolerance && Math.abs(xy) <= tolerance
 	};
 };
-//#endregion
-//#region src/render/canvas/box-shadow-painter.ts
+// src/render/canvas/box-shadow-painter.ts
 const complement = (ctx, rect, hole) => {
 	ctx.beginPath();
 	ctx.rect(rect.left, rect.top, rect.width, rect.height);
@@ -12754,8 +12960,7 @@ const paintBoxShadow = async (ctx, paint, shadow, options, budget) => {
 		ctx.restore();
 	}
 };
-//#endregion
-//#region src/render/canvas/text-clip-renderer.ts
+// src/render/canvas/text-clip-renderer.ts
 var TextClipRenderer = class {
 	ctx;
 	context;
@@ -12915,8 +13120,7 @@ var TextClipRenderer = class {
 		return canvases.length ? canvases : null;
 	}
 };
-//#endregion
-//#region src/render/canvas/canvas-renderer.ts
+// src/render/canvas/canvas-renderer.ts
 var CanvasRenderer = class CanvasRenderer {
 	surfaceRoot;
 	surfaceBudget;
@@ -12994,7 +13198,9 @@ var CanvasRenderer = class CanvasRenderer {
 			const hasMask = styles.maskImage.length > 0;
 			const reflect = styles.webkitBoxReflect;
 			const hasBlend = styles.mixBlendMode !== MIX_BLEND_MODE$1.NORMAL;
-			if (stack.element !== this.surfaceRoot && !this.legacySubtree && (hasMask || reflect || hasBlend || filter !== null && (hasFilter || styles.opacity < 1)) && this.canComposite(stack.element)) {
+			const reflectTransformed = reflect && !isIdentityMatrix(this.ancestorTransform(stack.element));
+			if (reflectTransformed) this.context.logger.warn("-webkit-box-reflect under an ancestor transform is not supported; the reflection is skipped for this subtree");
+			if (stack.element !== this.surfaceRoot && !this.legacySubtree && !reflectTransformed && (hasMask || reflect || hasBlend || filter !== null && (hasFilter || styles.opacity < 1)) && this.canComposite(stack.element)) {
 				if (!await this.renderCompositedStack(stack, filter, hasMask, reflect, hasBlend)) {
 					this.legacySubtree = true;
 					try {
@@ -13011,7 +13217,7 @@ var CanvasRenderer = class CanvasRenderer {
 	canComposite(paint) {
 		const supported = (container) => {
 			const styles = container.styles;
-			return !styles.isTransformed() && styles.zoom === 1 && styles.clipPath.type === 0 && !contains(styles.display, 2048) && parseFilterChain(styles.filter) !== null;
+			return styles.clipPath.type === 0 && !contains(styles.display, 2048) && parseFilterChain(styles.filter) !== null;
 		};
 		const subtree = (container) => supported(container) && container.elements.every(subtree);
 		let ancestor = paint.parent;
@@ -13021,24 +13227,82 @@ var CanvasRenderer = class CanvasRenderer {
 		}
 		return subtree(paint.container);
 	}
+	/**
+	* Root-to-element transform accumulated from the ancestor chain's
+	* TransformEffects (including zoom), stopping at the surface root. The
+	* element's own TransformEffect is intentionally excluded: inside the
+	* offscreen surface it is still applied by the normal effects pass, and
+	* at composition time it is filtered from the recomposed effect list.
+	*/
+	ancestorTransform(paint) {
+		const chain = [];
+		let node = paint;
+		while (node && node !== this.surfaceRoot) {
+			for (const effect of node.effects) if (isTransformEffect(effect)) chain.push(effect);
+			node = node.parent;
+		}
+		if (chain.length === 0) return IDENTITY_MATRIX;
+		let matrix = IDENTITY_MATRIX;
+		for (let i = chain.length - 1; i >= 0; i--) {
+			const effect = at(chain, i);
+			const anchored = multiplyMatrix(multiplyMatrix([
+				1,
+				0,
+				0,
+				1,
+				effect.offsetX,
+				effect.offsetY
+			], effect.matrix), [
+				1,
+				0,
+				0,
+				1,
+				-effect.offsetX,
+				-effect.offsetY
+			]);
+			matrix = multiplyMatrix(matrix, anchored);
+		}
+		return matrix;
+	}
 	async renderCompositedStack(stack, filter, hasMask, reflect, hasBlend = false) {
 		const signal = this.options.signal;
 		if (signal?.aborted) throw new DOMException("The operation was aborted.", "AbortError");
-		const bounds = cropSurface(surfaceBounds(stack.element.container), new Bounds(this.options.x, this.options.y, this.options.width, this.options.height), filter ? filterOutset(filter) : 0, this.options.scale);
+		const container = stack.element.container;
+		const ancestorMatrix = this.ancestorTransform(stack.element);
+		const ownTransforms = stack.element.effects.filter(isTransformEffect);
+		let chainMatrix = ancestorMatrix;
+		for (const effect of ownTransforms) chainMatrix = multiplyMatrix(chainMatrix, multiplyMatrix(multiplyMatrix([
+			1,
+			0,
+			0,
+			1,
+			effect.offsetX,
+			effect.offsetY
+		], effect.matrix), [
+			1,
+			0,
+			0,
+			1,
+			-effect.offsetX,
+			-effect.offsetY
+		]));
+		const layoutBounds = surfaceBounds(container);
+		const bounds = cropSurface(isIdentityMatrix(chainMatrix) ? layoutBounds : transformBoundsToAabb(chainMatrix, layoutBounds), new Bounds(this.options.x, this.options.y, this.options.width, this.options.height), filter ? filterOutset(filter, container.filterReferences) : 0, this.options.scale);
 		if (!bounds.width || !bounds.height) return true;
 		const reserved = reserveSurface(this.surfaceBudget, Math.ceil(bounds.width * this.options.scale), Math.ceil(bounds.height * this.options.scale));
 		if (!reserved) {
-			this.context.logger.info("Filter surface budget exceeded; using the existing renderer");
+			this.context.logger.warn("Filter surface budget exceeded; mask/filter/blend effects are dropped for this subtree");
 			return false;
 		}
+		const surfaceWindow = isIdentityMatrix(ancestorMatrix) || !hasMask ? bounds : inverseTransformBoundsToAabb(ancestorMatrix, bounds) ?? bounds;
 		const options = {
 			...this.options,
 			canvas: void 0,
 			backgroundColor: null,
-			x: bounds.left,
-			y: bounds.top,
-			width: bounds.width,
-			height: bounds.height
+			x: surfaceWindow.left,
+			y: surfaceWindow.top,
+			width: surfaceWindow.width,
+			height: surfaceWindow.height
 		};
 		let source;
 		let filtered;
@@ -13046,12 +13310,18 @@ var CanvasRenderer = class CanvasRenderer {
 			source = new CanvasRenderer(this.context, options, stack.element, this.surfaceBudget);
 			await source.renderStackContent(stack);
 			source.effectsRenderer.applyEffects([]);
-			if (filter) filtered = await renderFilterSurface(source.canvas, filter, stack.element.container.styles.opacity, options.scale, signal);
+			if (filter) filtered = await renderFilterSurface(source.canvas, filter, container.styles.opacity, options.scale, signal, {
+				references: container.filterReferences,
+				origin: {
+					x: container.bounds.left - surfaceWindow.left,
+					y: container.bounds.top - surfaceWindow.top
+				}
+			});
 			const composited = filtered ?? source.canvas;
-			if (hasMask) await this.applyMask(composited, stack.element.container.styles, bounds);
+			if (hasMask) await this.applyMask(composited, stack.element.container.styles, surfaceWindow, container.bounds, ownTransforms);
 			if (signal?.aborted) throw new DOMException("The operation was aborted.", "AbortError");
 			const own = stack.element.effects;
-			const effects = stack.element.getEffects(4, this.surfaceRoot).filter((effect) => !own.includes(effect) || !isFilterEffect(effect) && !isOpacityEffect(effect) && !isBlendEffect(effect) && !isClipEffect(effect));
+			const effects = stack.element.getEffects(4, this.surfaceRoot).filter((effect) => !own.includes(effect) || !isFilterEffect(effect) && !isOpacityEffect(effect) && !isBlendEffect(effect) && !isClipEffect(effect) && !isTransformEffect(effect));
 			this.effectsRenderer.applyEffects(effects);
 			if (hasBlend) {
 				this.ctx.save();
@@ -13075,8 +13345,15 @@ var CanvasRenderer = class CanvasRenderer {
 	* Composite an alpha mask onto a finished element surface: all mask
 	* layers are painted additively into a mask surface, then kept pixels are
 	* selected with destination-in.
+	*
+	* Coordinate spaces: the source surface paints in LAYOUT space (the
+	* ancestor TransformEffects stay active on the main canvas and transform
+	* the draw-back), so the mask must be painted in layout space too —
+	* anchored to the element's border box (containerBounds) — riding ONLY
+	* the element's own transform effects, which apply inside the surface
+	* rather than at draw-back.
 	*/
-	async applyMask(surface, styles, bounds) {
+	async applyMask(surface, styles, surfaceWindow, containerBounds, ownTransforms) {
 		const ctx = surface.getContext("2d");
 		if (!ctx) return;
 		const maskCanvas = this.context.resourceDocument.createElement("canvas");
@@ -13088,14 +13365,21 @@ var CanvasRenderer = class CanvasRenderer {
 			return;
 		}
 		maskCtx.scale(this.options.scale, this.options.scale);
-		maskCtx.translate(-bounds.left, -bounds.top);
+		maskCtx.translate(-surfaceWindow.left, -surfaceWindow.top);
+		for (let i = ownTransforms.length - 1; i >= 0; i--) {
+			const effect = at(ownTransforms, i);
+			maskCtx.translate(effect.offsetX, effect.offsetY);
+			maskCtx.transform(...effect.matrix);
+			maskCtx.translate(-effect.offsetX, -effect.offsetY);
+		}
+		const layoutArea = {
+			left: containerBounds.left,
+			top: containerBounds.top,
+			width: containerBounds.width,
+			height: containerBounds.height
+		};
 		try {
-			await paintMaskLayers(maskCtx, styles.maskImage, styles, {
-				left: bounds.left,
-				top: bounds.top,
-				width: bounds.width,
-				height: bounds.height
-			}, async (url) => await this.context.cache.match(url));
+			await paintMaskLayers(maskCtx, styles.maskImage, styles, layoutArea, async (url) => await this.context.cache.match(url));
 		} catch (error) {
 			this.context.logger.error(`Error rendering mask-image: ${error instanceof Error ? error.message : error}`);
 			releaseSurface(maskCanvas);
@@ -13239,7 +13523,7 @@ var CanvasRenderer = class CanvasRenderer {
 			y: this.options.y,
 			width: this.options.width,
 			height: this.options.height
-		}, (ctx, opts) => new CanvasRenderer(ctx, opts), container, curves, styles, (c, cv, img) => this.renderReplacedElement(c, cv, img));
+		}, (ctx, opts) => new CanvasRenderer(ctx, opts, void 0, this.surfaceBudget), container, curves, styles, (c, cv, img) => this.renderReplacedElement(c, cv, img));
 		renderFormElements(this.ctx, this.textRenderer, this.path.bind(this), container, styles);
 		await renderListMarker(this.ctx, this.context, this.textRenderer, paint, container, styles);
 	}
@@ -13635,8 +13919,7 @@ const calculateBackgroundCurvedPaintingArea = (clip, curves) => {
 const hasTextBackgroundClip = (styles) => {
 	return styles.backgroundClip.some((clip) => clip === 3);
 };
-//#endregion
-//#region src/render/canvas/foreignobject-renderer.ts
+// src/render/canvas/foreignobject-renderer.ts
 var ForeignObjectRenderer = class {
 	canvas;
 	ctx;
@@ -13701,8 +13984,7 @@ const stripRootOffsets = (element) => {
 		for (const [property, value] of previous) style[property] = value;
 	};
 };
-//#endregion
-//#region src/core/logger.ts
+// src/core/logger.ts
 var Logger = class {
 	id;
 	enabled;
@@ -13739,8 +14021,7 @@ var Logger = class {
 		}
 	}
 };
-//#endregion
-//#region src/core/cache-storage.ts
+// src/core/cache-storage.ts
 var Cache = class {
 	context;
 	_options;
@@ -13985,8 +14266,7 @@ const isInlineImage = (src) => INLINE_IMG.test(src);
 const isInlineBase64Image = (src) => INLINE_BASE64.test(src);
 const isBlobImage = (src) => src.substring(0, 4) === "blob";
 const isSVG = (src) => src.slice(-3).toLowerCase() === "svg" || INLINE_SVG.test(src);
-//#endregion
-//#region src/core/origin-checker.ts
+// src/core/origin-checker.ts
 /**
 * Origin Checker
 *
@@ -14038,8 +14318,7 @@ var OriginChecker = class {
 		return this.origin;
 	}
 };
-//#endregion
-//#region src/core/context.ts
+// src/core/context.ts
 var Context = class Context {
 	static instanceCount = 1;
 	instanceName = `#${Context.instanceCount++}`;
@@ -14086,8 +14365,7 @@ var Context = class Context {
 		this._windowBounds = this._windowBounds.add(left, top, 0, 0);
 	}
 };
-//#endregion
-//#region src/core/config-assembler.ts
+// src/core/config-assembler.ts
 /**
 * Coerce known numeric options from string (or other) values to actual numbers.
 * Mutates the opts object in place — this is intentionally a normalisation
@@ -14164,8 +14442,7 @@ const assembleRenderOptions = (opts, backgroundColor, left, top, width, height,
 	imageSmoothing: opts.imageSmoothing,
 	imageSmoothingQuality: opts.imageSmoothingQuality
 });
-//#endregion
-//#region src/core/background-parser.ts
+// src/core/background-parser.ts
 /**
 * Resolve the background colour for the rendered canvas, following CSS
 * background propagation rules:
@@ -14186,8 +14463,7 @@ const parseBackgroundColor = (context, element, backgroundColorOverride) => {
 	const defaultBackgroundColor = typeof backgroundColorOverride === "string" ? parseColor(context, backgroundColorOverride) : backgroundColorOverride === null ? 0 : 4294967295;
 	return element === ownerDocument.documentElement ? isTransparent(documentBackgroundColor) ? isTransparent(bodyBackgroundColor) ? defaultBackgroundColor : bodyBackgroundColor : documentBackgroundColor : defaultBackgroundColor;
 };
-//#endregion
-//#region src/core/render-element.ts
+// src/core/render-element.ts
 const emitProgress = (onProgress, context, phase, progress) => {
 	if (!onProgress) return;
 	try {
@@ -14216,7 +14492,7 @@ const renderElement = async (element, opts, config) => {
 	const windowBounds = new Bounds(windowOptions.scrollX, windowOptions.scrollY, windowOptions.windowWidth, windowOptions.windowHeight);
 	const context = new Context(contextOptions, windowBounds, config);
 	const performanceMonitoring = opts.enablePerformanceMonitoring ?? opts.logging ?? false;
-	const perfMonitor = new PerformanceMonitor(context, performanceMonitoring);
+	const perfMonitor = new PerformanceMonitor(context.logger, performanceMonitoring);
 	perfMonitor.start("total", {
 		width: windowOptions.windowWidth,
 		height: windowOptions.windowHeight
@@ -14285,8 +14561,7 @@ const renderElement = async (element, opts, config) => {
 	emitProgress(opts.onProgress, context, "render", 100);
 	return canvas;
 };
-//#endregion
-//#region src/index.ts
+// src/index.ts
 /**
 * Renders an HTML element to a `<canvas>` element.
 *
@@ -14322,7 +14597,6 @@ const html2canvas = (element, options = {}, config) => {
 	});
 	return renderElement(element, options, finalConfig);
 };
-//#endregion
 export { Html2CanvasConfig, PerformanceMonitor, Validator, createDefaultValidator, html2canvas as default, html2canvas };
 
 //# sourceMappingURL=html2canvas-pro.esm.js.map