Nuxt.js: Shifting elements when navigating between pages

[Vout]

Version

v2.11.0

Reproduction link

https://github.com/Vout/purvis-frontend

Steps to reproduce

1 - Build and run project
2 - Go from category page (e.g. http://localhost:3000/category/wasmachines) to a product
3 - Use browser back function
4 - See elements shifting on the page

What is expected ?

Elements load as expected and don't shift around like it is on a hard refresh.

What is actually happening?

Elements move around on a page load, mobile styling is applied first and it takes some time before desktop styling is applied.

This only happens when you navigate from one page to another, not when you do an hard refresh.

I made an video, that can be found here: https://www.icloud.com/iclouddrive/0JRJJ84i6EKfiQaYWcoNmf00Q#style-flash

Additional comments?

I have read the FOUC documentation but i don't think that is the case over here since it's also in production mode.

[Vout]

It seems to happen on elements that are styled on page level with a body class.

head() {
    return {
      bodyAttrs: {
        class: 'category-page'
      }
    }
  }

So elements that are styled inside the global css within this block .category-page {...} are jumping around.

It seems that server side rendering doesn't solve this issue like you would expect.

[MLDMoritz]

https://vuejs.org/v2/api/#v-cloak

Edit: Seems to not work with nuxt, anyhow this probably is a problem with your css / markup.

[Vout]

@MLDMoritz Tried the v-cloak and that doesn't work when u use it outside the vue container (e.g. on the body).

It doesn't have anything to do with my markup also, it happens also when i use as little as possible code.

The issue is that the page class is set as last so all data is available on the page and then the body class is set by Nuxt.js and you will see the page specific styling applied directly.

What seems to happen like the following example,

1 - default body color is green, styled globally so does it's job on all pages
2 - I have a page that i want to style with a back ground color, i will do that with a body class like this,

<script>
export default {
  head() {
    return {
      bodyAttrs: {
        class: 'category-page'
      }
    }
  }
}
</script>

3 - I will make some specific css .catgeory-page {background: red} (also on global level so i can re-use my css on multiple pages).
4 - Build and run the project
5 - Load the page, no issues at all
6 - Navigate away from the page and do a browser back, you will see that it will be green on load and then turns red.

[usb248]

Same issue, bodyAttrs (and htmlAttrs) seems not to be updated at the right moment.
workaround with css transition between page or not use bodyAttrs for your style + scoping your page code with the same class...
The effect is accentuated when the next page contains many components.

reproduction of this side effect is difficult.

(@Atinux je t'en avais parlé sur discord, je ne sais pas si tu t'en souviens.)

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[Vout]

Can this be re-opened because the issue is still there.

[usb248]

I don't understand why any core team member given't an explication. At least.

[Atinux]

Sorry about this sometimes an issue can be lost in others.

Will look at soon as possible

[edwin177]

For now, I've moved the conditional classes to a top level div instead of using bodyAttrs, where the conditional classes are defined in either data or computed.

However, page transitions are still not smooth as the classes for the "to" page are applied to the "from" page content before moving to the "to" page.

1. page1 shown
2. click on link for page2 to initiate page transition
3. page1 shown with page2 classes (sometimes even causes js errors as variables from page1 are lost)
4. page2 shown with page2 classes

[undefineq]

Have the same issue here

Version:
"nuxt": "^2.0.0"

Reproduction link:
https://wbdaily.ru

[usb248]

Any updates ?

[undefineq]

Have the same issue here

Version:
"nuxt": "^2.0.0"

Reproduction link:
https://wbdaily.ru

I fixed it by moving common layout styles to nuxt.config.js

[usb248]

@iamsul it's not a good workaround... in big app we need to split ..

[Vout]

Anyone who had luck solving this issue or has a good workaround?

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[Vout]

Stil an issue, shouldn’t be closed.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[Vout]

Stil an issue, shouldn’t be closed.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[Vout]

Stil an issue, shouldn’t be closed.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[Vout]

Not fixed, should be open.

[Atinux]

Actually this is directly an issue related to vue-meta, I can't really recommand to mix styles with vue-meta since it happens on a different lifecycle.

Have you tried using setting a dynamic class right inside the layout?

@Vout the GH link is not found, any chance to create a reproduction by using https://template.nuxtjs.org ?