Core - Disable scrollRestoration for meta frameworks

smastrom · Nov 15, 2023 · 96875c7 · 96875c7
1 parent 7d9c2b7
commit 96875c7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/packages/vue-use-fixed-header/src/useFixedHeader.ts b/packages/vue-use-fixed-header/src/useFixedHeader.ts
@@ -1,6 +1,6 @@
 import { shallowRef, ref, unref, watch, computed, readonly, type CSSProperties as CSS } from 'vue'
 
-import { isSSR, useReducedMotion } from './utils'
+import { isSSR, useReducedMotion, isMetaFramework } from './utils'
 import { TRANSITION_STYLES } from './constants'
 
 import type { UseFixedHeaderOptions, MaybeTemplateRef } from './types'
@@ -32,10 +32,17 @@ export function useFixedHeader(
       skipInitialObserverCb: true,
       isListeningScroll: false,
       isHovering: false,
-      isMount: true,
+      isScrollRestoration: true,
    }
 
-   const styles = shallowRef<CSS>({})
+   const styles = shallowRef<CSS>(
+      isMetaFramework
+         ? {
+              transform: enterStyles.transform,
+              ...(transitionOpacity() ? { opacity: 1 } : {}),
+           }
+         : {}, // will be set on scroll restoration
+   )
    const state = ref<State>(State.READY)
 
    const setStyles = (newStyles: CSS) => (styles.value = newStyles)
@@ -84,15 +91,19 @@ export function useFixedHeader(
     * Hides the header on page load before it has a chance to paint
     * if scroll restoration is instant. If not, applies the enter
     * styles immediately (without transitions).
+    *
+    * This is not possible if the header is server-rendered.
+    * In that case, the header will be visible and start transitioning
+    * when manually scrolled.
     */
    function onScrollRestoration() {
+      if (isMetaFramework) return
+
       window.requestAnimationFrame(() => {
-         if (!internal.isMount) return
+         if (!internal.isScrollRestoration) return
+         internal.isScrollRestoration = false
 
-         if (!isFixed()) {
-            internal.isMount = false
-            return
-         }
+         if (!isFixed()) return
 
          const isInstant = getScrollTop() > getHeaderHeight() * 1.2 // Resolves to false if scroll is smooth
 
@@ -109,7 +120,7 @@ export function useFixedHeader(
             })
          }
 
-         internal.isMount = false
+         internal.isScrollRestoration = false
       })
    }
 
@@ -189,7 +200,7 @@ export function useFixedHeader(
    // Scroll Events
 
    function createScrollHandler() {
-      let prevTop = 0
+      let prevTop = isSSR ? 0 : getScrollTop()
 
       return () => {
          const scrollTop = getScrollTop()
@@ -291,7 +302,6 @@ export function useFixedHeader(
             onCleanup(() => {
                removeListeners()
                internal.resizeObserver?.disconnect()
-               removeStyles()
             })
          },
          { immediate: true, flush: 'post' },

diff --git a/packages/vue-use-fixed-header/src/utils.ts b/packages/vue-use-fixed-header/src/utils.ts
@@ -2,6 +2,12 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'
 
 export const isSSR = typeof window === 'undefined'
 
+const isNuxt = !isSSR && '__NUXT__' in window
+const isAstro = !isSSR && 'Astro' in window
+const isQuasar = !isSSR && '__Q_META__' in window
+
+export const isMetaFramework = isNuxt || isAstro || isQuasar
+
 export function useReducedMotion() {
    const isReduced = ref(false)