I'm encountering an unexpected behaviour with page transitions in SvelteKit and need some insights. Here's a brief description of the issue:
Problem:
Page Transition Sequence: When navigating from one page (Page A) to another (Page B), the content of Page A remains visible during the transition. Specifically, the hero section and sub-navigation of Page B load first, but the rest of Page B isn't immediately visible. Instead, the full content of Page A remains above the hero section of Page B.
Effect on Sticky Navigation: This overlapping content during the transition causes my sticky navigation (WorkNav) in Page B to behave as if it's already scrolled past, making it sticky immediately. This is likely because, during the transition, the scroll position is technically below the content of Page A since it's still present.
Current Understanding: It seems the issue arises because the new page's content (Page B) is loaded while the old page's content (Page A) is still present, affecting the logic of my sticky navigation.
Seeking Suggestions: I am considering rewriting the WorkNav component to account for this transition state but am unsure how to approach this considering SvelteKit's page loading behaviour.
Recording: Screen recording that demonstrates the issue (low res): https://monosnap.com/file/6tCpkGljx23rpIWkIUczdyOONgwJRH
Reproduce / test the problem:
Go: https://svelteportfolio-git-test-branch-anders-radals-projects.vercel.app/work/smab
navigate to a casestudy from landing page (subnav is behaving like it should).
Scroll to bottom of the page, then click next case study. The subnav is now sticky and it should not be.
Technical Details:
Versions: "@sveltejs/kit": "^1.27.4", "svelte": "^3.54.0",
Browser(s): ARC Version 1.17.2 (chromium)
Additional Context: Transition is "fly" from svelte. Using "out:fade|local" does not solve the issue.
Repo: https://github.com/Andyradall/my-app/tree/test-branch/
Any insights, suggestions, or similar experiences would be greatly appreciated!