Force relayout to fix stuck header blur (#9979)

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(
+          translateY: interpolate(headerModeValue, [0, 1], [0, -hHeight]),
-            headerModeValue,
-            [0, 1],
-            [0, headerPinnedHeight - headerHeight.get()],
-          ),
         },
       ],
     }