Browse Source

[ts][webcomponents] Fixed no-auto-parent-transform with parent having a transform.

Davide Tantillo 4 tháng trước cách đây
mục cha
commit
49362e80a3

+ 0 - 2
spine-ts/spine-webcomponents/example/tutorial.html

@@ -2692,8 +2692,6 @@ tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => {
             <div class="split-left" style="overflow-y: auto; width: 100px; height: 200px; transform: translateZ(0);">
                 <spine-overlay
                     overlay-id="scroll"
-                    scrollable
-                    no-auto-parent-transform
                     overflow-top=".2"
                     overflow-bottom=".2"
                     overflow-left=".2"

+ 5 - 2
spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts

@@ -173,6 +173,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 	   * Connected to `appendedToBody` attribute.
 	 */
 	private appendedToBody = true;
+	private hasParentTransform = true;
 
 	readonly time = new TimeKeeper();
 
@@ -271,7 +272,9 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 		// 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 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") {
+			if (this.hasCssTweakOff()) {
+				this.hasParentTransform = false;
+			} else {
 				this.parentElement!.style.transform = `translateZ(0)`;
 			}
 			this.resizeObserver = new ResizeObserver(this.resizedCallback);
@@ -975,7 +978,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
 
 			// 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) {
+			if (this.hasParentTransform) {
 				scrollPositionX += this.parentElement!.scrollLeft;
 				scrollPositionY += this.parentElement!.scrollTop;
 			} else {