Freeze backdrop pose when the pointer leaves

Leaving mid-ease left the 150ms transition running toward the last
target; snapshot the computed transform and clear transition instead.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-07-22 17:41:16 +02:00
parent 0689ac7d14
commit 0f7b639d2f

View File

@@ -189,10 +189,28 @@ export function onBackdropPointerMove(event: PointerEvent<HTMLElement>) {
image.style.transform = nextTransform;
}
// Leave the blur where it is; only clear tracking flags so the next enter can
// ease from that frozen pose instead of jumping.
// Freeze the blur at its visible pose. Clearing flags alone is not enough:
// during enter-ease, transition is still 150ms toward the last target, so the
// image would keep sliding after leave unless we capture the computed
// transform and disable the transition.
export function onBackdropPointerLeave(event: PointerEvent<HTMLElement>) {
const surface = event.currentTarget;
clearEaseEnd(surface);
surface.removeAttribute(PARALLAX_ACTIVE);
const frame = backdropFrame(surface);
if (frame == null) {
return;
}
const image = backdropImage(frame);
if (image == null) {
return;
}
const computed = getComputedStyle(image).transform;
image.style.transition = "none";
if (computed !== "none") {
image.style.transform = computed;
}
}