Footer flickers while changing routes

There seems to be a glitch where the footer briefly flashes or collapses when switching routes, specifically if the page is scrolled down to the middle. If at the top of the page, the transition works smoothly. This issue becomes more apparent on high refresh rate monitors like 144-240+Hz. It's uncertain whether this is a bug within the Nuxt layout or another factor.

Below is the layout structure:

<template>
  <div>
    <AppHeader />

    <div>
      <slot />
    </div>

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

To see the issue in action, check out this reproduction: https://stackblitz.com/edit/nuxt-starter-upaovs?file=app%2Fapp.vue

Watch a video demonstrating the problem here:

If you have any insights or solutions, please share them. Thank you!

Answer №1

According to @tao's suggestion in the comments section above, a solution has been proposed.

As soon as the fade out animation of the departing page is completed, the page element is removed, causing the footer to shift upwards temporarily due to the absence of the page element. However, upon adding the new page, the footer naturally moves back down and the opacity transition begins. An alternative approach would be to refrain from displaying the footer while the new page loads:

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

Ensure that appropriate class names are assigned to both the footer and content (wrapper div encompassing <slot/>).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vitest encountered an issue fetching a local file

I am currently working on testing the retrieval of a local file. Within my project, there exists a YAML configuration file. During production, the filename may be altered as it is received via a web socket. The code functions properly in production, but ...

Leveraging Vue 2.0 and webpack to integrate components from an npm package

As I venture into setting up a project with webpack and Vue 2.0, I encountered a slight hiccup when trying to incorporate components from npm packages (such as vue-parallax) into my project. Upon installing the package, everything seems to be in place, bu ...

Whenever my code is used within Google Sites, it triggers the opening of a new and empty tab

When using this code inside an HTML box in Google Sites, a problem arises. It seems to work perfectly fine in Internet Explorer and Chrome when saved to an HTML file. However, within Google Sites, it unexpectedly opens a new tab with no data. The code st ...

One-Time Age Verification Popup Requirement

Hi there! I'm facing a challenge with an age verification pop up on my webpage. Currently, the pop up appears on every page a user lands on, but I only want it to show on their first visit. I've tried using cookies to achieve this but haven' ...

Modifying the title of a dynamically generated element with a Vuex mutation

I'm facing a confusing issue where I am unable to manipulate the title of a dynamically added element independently. The title seems to change for all elements created in the process. What I am aiming for is to be able to call multiple components and ...

Using Angular2 observables to parse JSON with a root element

I am completely new to working with Angular observables and I find myself a bit bewildered by how it all functions. Recently, I was handed an Angular CLI application that is mostly operational, but now I need to connect it to my existing API. Within my se ...

Is it possible to create a carousel using a JQuery slideshow that connects the first and last list elements?

I am working on creating a carousel effect with three list elements that should slide in and out of the container when the left or right arrows are clicked. I want the list elements to wrap so that when the last element is reached, it goes back to the firs ...

A stylish method for converting CSV data into XML format using Node.js and Express

I am in search of a sophisticated solution to convert CSV files into hierarchical XML format based on a specific template within a Node/Express server. For example, if the CSV is of Type Template "Location": Name,Lat,Lon,Timezone name,lat,lon,timezone it ...

Is it possible to include array elements in a dropdown menu using React?

Imagine you have an array called const places = [" a1", "a2", "a3"]; and <FormControl variant="outlined" className={classes.formControl}> <InputLabel id="dropdown_label">Testing</InputL ...

Angular Router malfunctioning, URL is updated but the page fails to load properly

My file structure is shown below, but my routing is not working. Can you please help me identify the issue? index.html <!DOCTYPE html> <html ng-app="appNakul"> <head> <title> Nakul Chawla</title> <!--<base href ...

Using React to insert a link with JSX variables

When inserting normal HTML elements with React variables in JSX, there are a few ways to go about it. One option is to use the dangerouslySetInnerHTML attribute or you can utilize a package like html-react-parser from npm. The following code demonstrates ...

Retrieving User Input for Column Filters in AG-Grid-React

After the user enters input in the column filter, I am attempting to update the Redux mode, but it does not seem to be working properly. <AgGridReact rowData={rowData} columnDefs={columnDefs} defaultColDef={defaultColDef} animateRows={ ...

Differences between JavaScript array manipulation using the split(" ") method and the spread operator

I'm currently attempting to determine if a given sentence is a palindrome, disregarding word breaks and punctuation. The code snippet that utilizes cStr.split(" ") DOES NOT achieve the desired outcome. Although it splits on whitespaces (&qu ...

How can we ensure that Ajax consistently provides useful and positive outcomes?

Here is my PHP code: function MailList() { $this->Form['email'] = $_POST["email"]; $index = $this->mgr->getMailList($_POST["email"]); } // SQL code function getMailList($email) { $mailArray = Array(); $sql ...

How does one retrieve the parent id of an anchor tag with prototype?

Event.observe(window, 'load', function() { $$('a.tag_links').each(function(s) { //alert(s.parent.parent.id); //How to get id of its parent to parent }); } ); I am trying to retrieve the id of the parent element. The ...

node js retrieves information from the request body

Hey there! I'm diving into the world of Node.js and JavaScript, but I've hit a roadblock. I'm trying to fetch data from a URL using node-fetch, then parse it as JSON. However, I keep running into the issue of getting 'undefined' in ...

Is there a way to initiate the execution of a Spring Batch job from a Vue.js

I need to initiate a spring batch execution from an endpoint by calling a backend service. In my Vue application, I am attempting to make this call to trigger the batch process. async function executeBatch(data) { let response = await Axios.post(&apos ...

Create a React MUI component that allows menu items to become sticky when selected

Is there a way to make the mui MenuItem stay sticky to Select while scrolling down? To see the issue in action, check out this codesandbox example https://codesandbox.io/s/quirky-knuth-5hr2dg?file=/Demo.tsx Simply click on the select and start scrolling ...

What is the process for submitting a form on consecutive URLs?

I have a form that requires input for settings and includes two buttons: one to save the form and another to both save and execute the settings. <form method="post" action="/settings/{{id}}/save"> <!-- input fields --> ...

The error message from @nuxtjs/sitemap indicates that it is unable to locate the 'nitropack' package

I have a nuxtjs v2 webapp and recently integrated the @nuxtjs/sitemap module. However, I encountered an error whenever I tried to run npm run dev, build, or generate: Cannot find package 'nitropack' imported from D:\Web Development\...& ...