Footer flashes during route transition

Question

The footer briefly flashes or collapses when switching routes, but only if the page is scrolled down to somewhere around the middle of a page. If I'm at the top of the page, the route transition works fine. This issue is more noticeable on high refresh rate monitors (e.g., 144-240+Hz). I'm not sure if this is a bug with the Nuxt layout or something else.

Here's the layout:

<template>
  <div>
    <AppHeader />

    <div>
      <slot />
    </div>

    <AppFooter />
  </div>
</template>

Reproduction: https://stackblitz.com/edit/nuxt-starter-upaovs?file=app%2Fapp.vue

Here's the video of the issue: https://www.veed.io/view/44f8c82d-d7e9-408f-8056-1a256bea8c19?panel=share

Looking for a possible solution.

Answer 1

The solution is recommended by @tao in the comments above.

When the fade out of the leaving page ends, the page element is removed and for a render cycle the footer is pushed up because there's no page element. Once the new page is added, the footer naturally moves down and the opacity transition begins. A simpler solution is to not render the footer while the page is entering:

.content:has(.page-enter-active) + .footer {
    display: none;
}

Be sure to add class names to the footer and a content (wrapper div around <slot/>).