From e1e88fce60844ae70742b08c03816b68f2a57a3e Mon Sep 17 00:00:00 2001
From: Davide Tantillo <iamdjj@gmail.com>
Date: Thu, 15 May 2025 18:26:33 +0200
Subject: [PATCH] [ts] Fixed and improved appendedToBody overlays without
 transform.

---
 .../spine-webcomponents/example/tutorial.html   |  1 -
 .../src/SpineWebComponentOverlay.ts             | 17 +++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/spine-ts/spine-webcomponents/example/tutorial.html b/spine-ts/spine-webcomponents/example/tutorial.html
index 708b6cf16..56d69bd2e 100644
--- a/spine-ts/spine-webcomponents/example/tutorial.html
+++ b/spine-ts/spine-webcomponents/example/tutorial.html
@@ -1356,7 +1356,6 @@ function removeDiv() {
             async function reloadWidget(element) {
                 element.disabled = true;
                 await widget.whenReady;
-                const skeleton = widget.skeleton;
                 widget.loading = true;
                 setTimeout(() => {
                     element.disabled = false;
diff --git a/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts b/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts
index ea762b619..ca89ba90f 100644
--- a/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts
+++ b/spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts
@@ -166,11 +166,11 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 	 *
 	 * In order to fix this behaviour, it is necessary to insert a dedicated `spine-overlay` webcomponent as a direct child of the container.
 	 * Moreover, it is necessary to perform the following actions:
-	 * 1) The scrollable container must have a `transform` css attribute. If it hasn't this attribute the `spine-overlay` will add it for you.
-	 * If your scrollable container has already this css attribute, or if you prefer to add it by yourself (example: `transform: translateZ(0);`), set the `no-auto-parent-transform` to the `spine-overlay`.
+	 * 1) The appendedToBody container must have a `transform` css attribute. If it hasn't this attribute the `spine-overlay` will add it for you.
+	 * If your appendedToBody container has already this css attribute, or if you prefer to add it by yourself (example: `transform: translateZ(0);`), set the `no-auto-parent-transform` to the `spine-overlay`.
 	 * 2) The `spine-overlay` must have an `overlay-id` attribute. Choose the value you prefer.
 	 * 3) Each `spine-skeleton` must have an `overlay-id` attribute. The same as the hosting `spine-overlay`.
-	   * Connected to `scrollable` attribute.
+	   * Connected to `appendedToBody` attribute.
 	 */
 	private appendedToBody = true;
 
@@ -270,7 +270,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 		// Alternatively, we can store the body size, check the current body size in the loop (like the translateCanvas), and
 		// if they differs call the resizeCallback. I already tested it, and it works. ResizeObserver should be more efficient.
 		if (this.appendedToBody) {
-			// if the element is scrollable, the user does not disable translate tweak, and the parent did not have already a transform, add the tweak
+			// if the element is appendedToBody, the user does not disable translate tweak, and the parent did not have already a transform, add the tweak
 			if (this.appendedToBody && !this.noAutoParentTransform && getComputedStyle(this.parentElement!).transform === "none") {
 				this.parentElement!.style.transform = `translateZ(0)`;
 			}
@@ -963,6 +963,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 		}
 	}
 
+	// this function is invoked each frame - pay attention to what you add here
 	private translateCanvas () {
 		let scrollPositionX = -this.overflowLeftSize;
 		let scrollPositionY = -this.overflowTopSize;
@@ -972,9 +973,9 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 			scrollPositionY += window.scrollY;
 		} else {
 
-			// Ideally this should be the only scrollable case (no-auto-parent-transform not enabled or at least an ancestor has transform)
-			// I'd like to get rid of the code below
-			if (!this.hasCssTweakOff()) {
+			// Ideally this should be the only appendedToBody case (no-auto-parent-transform not enabled or at least an ancestor has transform)
+			// I'd like to get rid of the else case
+			if (!this.noAutoParentTransform) {
 				scrollPositionX += this.parentElement!.scrollLeft;
 				scrollPositionY += this.parentElement!.scrollTop;
 			} else {
@@ -984,7 +985,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 
 				let offsetParent = this.offsetParent;
 				do {
-					if (offsetParent === document.body) break;
+					if (offsetParent === null || offsetParent === document.body) break;
 
 					const htmlOffsetParentElement = offsetParent as HTMLElement;
 					if (htmlOffsetParentElement.style.position === "fixed" || htmlOffsetParentElement.style.position === "sticky" || htmlOffsetParentElement.style.position === "absolute") {