Fix stuck scroll edge effect on the Home header

The Liquid Glass relayout hack only fired when the header mode was exactly 0.
The old overshoot-clamped spring landed there the moment it crossed the
target, but the new critically damped spring creeps in and only snaps to 0
when it terminates, and a scroll event can cancel it first. Treat anything
under a fraction of a pixel as settled, and pin the transform once settled so
nothing moves after the relayout.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JWQciPDiipBhqiW922Nivs
This commit is contained in:
Claude
2026-09-07 21:19:25 +00:00
parent 6671bd9f42
commit 745fce6422
+29 -15
View File
@@ -18,6 +18,11 @@ import {useShellLayout} from '#/state/shell/shell-layout'
import {IS_LIQUID_GLASS, IS_NATIVE, IS_WEB} from '#/env'
const WEB_HIDE_SHELL_THRESHOLD = 200
/**
* Header mode below which the header counts as fully shown. In mode units, so
* this is a fraction of the header height: well under a pixel.
*/
const HEADER_SETTLED_THRESHOLD = 0.002
const HomeHeaderModeContext = createContext<SharedValue<number> | null>(null)
HomeHeaderModeContext.displayName = 'HomeHeaderModeContext'
@@ -57,25 +62,34 @@ export function useHomeHeaderTransform() {
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
/*
* 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
*
* "Settled" is a threshold rather than exactly 0: a critically damped
* spring creeps towards 0 and only snaps to it when it terminates, and a
* scroll event can cancel it before then. Once settled we also pin the
* transform so nothing moves after the relayout.
*/
const settled = headerModeValue < HEADER_SETTLED_THRESHOLD
const relayoutingOffset = settled ? 1 : 0
return {
top: relayoutingOffset,
pointerEvents: headerModeValue === 0 ? 'auto' : 'none',
opacity: Math.pow(1 - headerModeValue, 2),
pointerEvents: settled ? 'auto' : 'none',
opacity: settled ? 1 : Math.pow(1 - headerModeValue, 2),
transform: [
{
translateY:
interpolate(
headerModeValue,
[0, 1],
[0, headerPinnedHeight - hHeight],
) - relayoutingOffset,
translateY: settled
? -relayoutingOffset
: interpolate(
headerModeValue,
[0, 1],
[0, headerPinnedHeight - hHeight],
),
},
],
}