From 5ee667f307bc459ba53cdaabdad00a0ea1ee6846 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Mon, 2 Mar 2026 18:50:00 +0000 Subject: [PATCH] Force relayout to fix stuck header blur (#9979) --- src/lib/hooks/useMinimalShellTransform.ts | 33 +++++++++++++++++++---- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/src/lib/hooks/useMinimalShellTransform.ts b/src/lib/hooks/useMinimalShellTransform.ts index b240429779..fc3bb9c9f7 100644 --- a/src/lib/hooks/useMinimalShellTransform.ts +++ b/src/lib/hooks/useMinimalShellTransform.ts @@ -16,16 +16,39 @@ export function useMinimalShellHeaderTransform() { const headerTransform = useAnimatedStyle(() => { const headerModeValue = headerMode.get() + const hHeight = headerHeight.get() + + if (IS_LIQUID_GLASS) { + // bit of a hackfix, but: the header can get affected by scrollEdgeEffects + // when animating from closed to open. workaround is to trigger a relayout + // by offsetting the top position. the actual value doesn't matter, and we + // simultaneously offset it using the translate transform. + // I think a cleaner way to do it would be to use UIScrollEdgeElementContainerInteraction + // manually or something like that, because this kinda sucks -sfn + const relayoutingOffset = headerModeValue === 0 ? 1 : 0 + return { + top: relayoutingOffset, + pointerEvents: headerModeValue === 0 ? 'auto' : 'none', + opacity: Math.pow(1 - headerModeValue, 2), + transform: [ + { + translateY: + interpolate( + headerModeValue, + [0, 1], + [0, headerPinnedHeight - hHeight], + ) - relayoutingOffset, + }, + ], + } + } + return { pointerEvents: headerModeValue === 0 ? 'auto' : 'none', opacity: Math.pow(1 - headerModeValue, 2), transform: [ { - translateY: interpolate( - headerModeValue, - [0, 1], - [0, headerPinnedHeight - headerHeight.get()], - ), + translateY: interpolate(headerModeValue, [0, 1], [0, -hHeight]), }, ], }