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

This commit is contained in:
Davide Tantillo 2025-05-16 15:44:44 +02:00
parent fb8bc402e7
commit 49362e80a3
2 changed files with 5 additions and 4 deletions

View File

@ -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"

View File

@ -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 {