From 0f7b639d2fdfb18c436e29d46063c37f41db54c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= Date: Wed, 22 Jul 2026 17:41:16 +0200 Subject: [PATCH] Freeze backdrop pose when the pointer leaves MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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é --- .../src/components/backdropParallax.ts | 22 +++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/apps/compliance-portal/src/components/backdropParallax.ts b/apps/compliance-portal/src/components/backdropParallax.ts index 8eea22d92..586523793 100644 --- a/apps/compliance-portal/src/components/backdropParallax.ts +++ b/apps/compliance-portal/src/components/backdropParallax.ts @@ -189,10 +189,28 @@ export function onBackdropPointerMove(event: PointerEvent) { 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) { 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; + } }