Fullpage.js: All the page content stack up before loading the js

[darshkoreGC]

Hi, I am facing the issue where all the slide content stacks on top before displaying/loading actual fullpage.js.. it happens for a sec by is really unprofessional.

here is the screenshot.

[alvarotrigo]

That's up to to the developer and how he wants to deal with it.
I usually recommend people to initialise fullpage.js in the document ready function as detailed in the docs.

But you can also set the height of all sections to 100% on your own CSS before fullpage.js even gets initialised.

As you can see that issue won't take place in the demo page or any of the other examples.
Take a look at them.

[bewards]

I'd like to see the above comment by @alvarotrigo in the Wiki or README. I had to debug pre-initialization of the plugin script to see the differences between my site and the demo page and finally noticed the height: 100% set on the sections and all of it's ancestors (html, body, main-content). Thanks!

[alvarotrigo]

Thanks for the feedback! I'll consider it.

[geochanto]

@alvarotrigo I'm running into the same issue on react-fullpage. Since I have no access to domready... any suggestions how to deal with it? Setting CSS for .section to 100% doesn't seem to work, even if I inline it on the page before fullpage JS gets loaded.

[alvarotrigo]

See my reply here.

CSS will for sure do the trick, that's what I'm using in the fullpage site, the vue-fullpage one and the react-fullpage one.

[geochanto]

No it still does not work. I'm using nextjs. JS assets are using rel="preload". Perhaps that has something to do with it, but as of now your CSS still having no effect :/

I also tried to hide sections with CSS and then using afterRender() callback to make them show up again after rendering is finished, but no luck, fullpage.js throwing errors, no matter if I add a new class to sections, or use display/visibility/opacity.

[alvarotrigo]

This is not really a fullpage.js issue.
Try without using fullPage.js first. Get your section full height with pure HTML + CSS.

Once you have that, add fullpage.js.

[geochanto]

OK after much trial and error I came up with a hack. Seems to be working. Maybe it helps someone else later:

1. create a state for the 'display' CSS property, set it to 'none'
2. add inline CSS to each section and set 'display' to your state variable
3. add afterRender() callback to ReactFullpage that sets the state of the variable to 'table'.

basically all sections are hidden until they're finished loading, and then they display.