Nuxt.js: Weird glitch on page change (Firefox)

[manniL]

Issue Description:

While building my own website (https://lichter.io/) I've recognized that when changing pages, the (already loaded) footer will be displayed before the page content kicks in. The glitch does not occur on the first load, only on page change.

System information:

Browser: Firefox (tested on version 58.0.1 (64-bit) Ubuntu 17.10), Chrome and iOS Safari ran fine.
NuxtJS mode: production mode
NuxtJS version: 1.4 (but also occurred on previous versions)

How does the glitch look like

Firefox 58.0.1 (64-bit) Ubuntu 17.10:

Chrome 64.0.3282.140 (Official Build) (64-bit) Ubuntu 17.10:

Recording from @JGJP: https://jgarcia.jp/nuxt-glitch/demo.mp4

Repos and steps to reproduce

Repositories

Repo of the gifs (live at https://lichter.io)

Repo from @JGJP (live at https://jgarcia.jp/nuxt-glitch/)

Steps to reproduce

1. Use Firefox 58.0.1 (64-bit) Ubuntu 17.10
2. Enter one of the sites linked above
3. Switch pages back and forth

Possibly related issues

https://github.com/nuxt/nuxt.js/issues/1002

_{This question is available on Nuxt.js community (#c2422)}

[abellion]

Same issue here !

[hackuun]

Yes, there's issue in FF, I wrote about it too. As far as I understand, it's a specific FF issue (I hope), so I get used to it. But if it can be fixed it would be cool.

[DougHayward]

Seems it's probably a css issue more than a nuxt issue? Is it possibly related to this?

https://stackoverflow.com/questions/41837540/footer-not-staying-at-the-bottom-in-firefox

[manniL]

@BonnieDoug Well, the footer stays at the bottom when the site is fully loaded, so I don't think it's a CSS issue. 🤔

[DougHayward]

@manniL but once the page is loaded, there is content pushing the footer to the bottom. While you are waiting for the page to load there is nothing there to keep it down so it jumps up probably ignoring some sort of height: 100% styling on the containing div, but I can only guess, as I've not seen your code.

[manniL]

@BonnieDoug This doesn't happen in other browsers (e.g. chrome), so the only reason I could imagine is that the (cached) page loads faster on chrome than FF, so you don't see that footer flashing.

The weird thing is, that the Nuxt.js app is not running in SPA mode, so everything should be rendered serverside and that issue shouldn't be related to CSS at all.

[JGJP]

I'm having the same problem, what it looks like to me is that the <nuxt> component within the layout gets added to the DOM after other elements in the layout like the footer. If you comment out <nuxt> you'll see what the split second flash is. I've kind of worked around this for now by putting my footer in all my page components instead, but this defeats the purpose of using a layout, IMO.

Hoping there can be a fix for this.

[qm3ster]

Is this in production (build + start) or in dev?

[manniL]

@qm3ster In production. Would it be in dev only, it wouldn't be an issue at all. :)
You can check it directly on the website I've linked above or can clone the repo and try it locally

[qm3ster]

Couldn't reproduce even after disabling service worker.
HOWEVER...
Have you noticed that the 2px progress bar stays at the top of the page, so there is a gap between the header and the browser controls?

[manniL]

Which browser and OS did you use for your reproduction attempts?

Funny, I haven't noticed it by now. But I've fixed it in the repo :relaxed:

[qm3ster]

:b:irefox 58.0.2 (64-bit) on :b:u:b:untu 17.10 GNOME.

[manniL]

Weird... I'm using the same Browser and System, but the issue persists. Will cross-check on another PC tomorrow.

[qm3ster]

nvidia proprietary driver?

[JGJP]

I made a simple project that demonstrates this issue, here's a screen recording:
https://jgarcia.jp/nuxt-glitch/demo.mp4

try the site yourself

repo

[manniL]

@qm3ster Yes!
@JGJP Thanks, I'll add the links to the issue!

[qm3ster]

I can't see it :(
Guess something is wrong with me.

[hackuun]

I have this bug without Nvidia.
Anyway, Firefox is horrible. I dropped following their way and suggest you to do the same. For example, today I discovered another issue in Firefox - translateZ transition doesn't work right. It works freaking everywhere beside Firefox. So to hell this guys.

[hackuun]

@qm3ster dude, it's right in the video. You trolling us, stop it :smile:

[qm3ster]

@hackuun I meant I can't reproduce it even with the garish oversimplified example provided by @JGJP where I don't have to fight a webworker.
On my machine it refuses to happen.

I can obviously see it in the video, I don't have 7fps vision disease.

[campope]

Yep also seeing the same issue only on firefox.

[icehaunter]

Also the same problem

[mxmaxime]

Same problem :(

[manniL]

Tested it again with latest FF and it seems to be fixed.

[cmty[bot]]

This bug-report has been fixed by @manniL.

Doesn't occur in latest FF version anymore.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.