forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Force relayout to fix stuck header blur (#9979)
authored by
Samuel Newman
and committed by
GitHub
5ee667f3
9c29b286
+28
-5
+28
-5
src/lib/hooks/useMinimalShellTransform.ts
+28
-5
src/lib/hooks/useMinimalShellTransform.ts
···
16
16
17
17
const headerTransform = useAnimatedStyle(() => {
18
18
const headerModeValue = headerMode.get()
19
+
const hHeight = headerHeight.get()
20
+
21
+
if (IS_LIQUID_GLASS) {
22
+
// bit of a hackfix, but: the header can get affected by scrollEdgeEffects
23
+
// when animating from closed to open. workaround is to trigger a relayout
24
+
// by offsetting the top position. the actual value doesn't matter, and we
25
+
// simultaneously offset it using the translate transform.
26
+
// I think a cleaner way to do it would be to use UIScrollEdgeElementContainerInteraction
27
+
// manually or something like that, because this kinda sucks -sfn
28
+
const relayoutingOffset = headerModeValue === 0 ? 1 : 0
29
+
return {
30
+
top: relayoutingOffset,
31
+
pointerEvents: headerModeValue === 0 ? 'auto' : 'none',
32
+
opacity: Math.pow(1 - headerModeValue, 2),
33
+
transform: [
34
+
{
35
+
translateY:
36
+
interpolate(
37
+
headerModeValue,
38
+
[0, 1],
39
+
[0, headerPinnedHeight - hHeight],
40
+
) - relayoutingOffset,
41
+
},
42
+
],
43
+
}
44
+
}
45
+
19
46
return {
20
47
pointerEvents: headerModeValue === 0 ? 'auto' : 'none',
21
48
opacity: Math.pow(1 - headerModeValue, 2),
22
49
transform: [
23
50
{
24
-
translateY: interpolate(
25
-
headerModeValue,
26
-
[0, 1],
27
-
[0, headerPinnedHeight - headerHeight.get()],
28
-
),
51
+
translateY: interpolate(headerModeValue, [0, 1], [0, -hHeight]),
29
52
},
30
53
],
31
54
}