N
Nuxt•2d ago
Floboy

Scroll flickering on page change

I'm new to Nuxt and currently trying to migrate a small website from Vite. I noticed a difference in page change behavior with Nuxt. Once I'm clicking on a NuxtLink, there's a small delay between the scrollToTop made by vue-router and the load of the new page, which creates a flickering effect. It happens even on pages that doesn't contain asynchronous calls. Also, note that I'm using a <Transition> markup to encapsulate the <NextPage>, the main reason is that I need an animation on website load and this is the only way to achieve that. It seems to partially fix the issue if I remove the animation.. How can I fix that while keeping transitions?
2 Replies
kapa.ai
kapa.ai•2d ago
Hi @Floboy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The scroll flickering you’re experiencing during page transitions in Nuxt is a known issue related to the timing of scroll restoration and page transitions. By default, Nuxt (and vue-router) scrolls to the top of the page as soon as navigation starts, which can cause a visible jump or flicker before the new page content is rendered and the transition animation begins. Recent updates to Nuxt have improved the default scroll behavior to handle these edge cases more gracefully, especially when using page transitions. For example, a fix was introduced to ensure that the scroll position is preserved or restored at the correct time, and that the scroll-to-top action does not occur before the transition starts. This is particularly important if you are using custom transitions via the <NuxtPage :transition="..."/> prop or the app.pageTransition option in your nuxt.config.ts file. The fix ensures that the scroll-to-top happens in sync with the transition, reducing or eliminating the flicker effect you described. You can see more about this in the related pull request and issue discussions: - fix(nuxt): respect the scroll behavior set by scrollToTop - Page scroll to top before transition has started using NuxtPage transition How to address the issue: 1. Update Nuxt: Make sure you are using the latest version of Nuxt 3, as these improvements have been merged recently. 2. Configure Transitions in nuxt.config.ts: If you are using transitions, set them in your nuxt.config.ts under the app key, rather than only on the <NuxtPage> component. This ensures Nuxt handles the scroll and transition timing correctly: 
   export default defineNuxtConfig({
     app: {
       pageTransition: { name: 'page-fade', mode: 'out-in' }
     }
   })
   
   export default defineNuxtConfig({
     app: {
       pageTransition: { name: 'page-fade', mode: 'out-in' }
     }
   })
3. Custom Scroll Behavior: If you need to further customize scroll behavior, you can override the router’s scroll behavior in app/router.options.ts as described in the Nuxt documentation. 4. Avoid Delayed Style Loading: If you are dynamically importing styles (e.g., via onBeforeMount), this can cause layout shifts and affect scroll restoration. Instead, use the <style> block or import styles statically to ensure they are applied before the scroll position is restored, as highlighted in a related issue here. By following these steps and ensuring your Nuxt version includes the latest fixes, you should see a significant reduction or elimination of scroll flickering during page transitions. If you still encounter issues, double-check your transition and scroll configuration, and consider providing a minimal reproduction for further debugging. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2d ago
<@209407319526735872> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?