Fullpage.js: Layout temporarily breaks on page load

[JP-UK81]

Hi Alvaro,
the layout of my page temporarily breaks on page load and then fix itself after half second or so.
I'm using fullpage (I purchased the licence) and bootstrap 4.

You can see the codepen here
https://codepen.io/Jp_uk/pen/JmPpzN

The issue is more evident here:
http://littleinferno.co.uk/invoke-vision/

Steps to reproduce it

Load the page

Thank you,
Jp

[alvarotrigo]

This has been answered a couple of times before in other closed issues.
It is not really a bug, it is a design decision.

The solution is as simple as forcing it through your own css.
Assuming #fullpage is your fullpage wrapper and that you use the default selectors for sections and slides (section and slide):

body, html,
#fullpage,
.section,
.slide,
.fp-tableCell{
    height: 100%
}

Fullpage.js shouldn't force the height of the sections to 100% of the viewport until it is initialised. And that's the delay you are experience.

Forcing it through CSS will in some cases result in unwanted styling. For example:

• When dynamically initialising fullPage.js.
• When including the fullPage.js stylesheet in a CSS for all the site, but using fullPage.js only in a couple of pages.
• When using custom selectors for section and slides.

[JP-UK81]

Sorry but the above didn't work. See amended pen https://codepen.io/Jp_uk/pen/JmPpzN

[alvarotrigo]

Also, if you are using verticalCentered, add the wrapper on your HTML markup yourself.

Instead of:

<div class="section">My content</div>

Use:

<div class="section fp-table">
    <div class="fp-tableCell">
       My content
    </div>
</div>

Assuming you load the fullpage.js stylesheet on your page header.

[JP-UK81]

Hi Alvaro, sorry but even with the above I had no joy.
PS. What you mean when you say

it is a design decision.

Thanks

[JP-UK81]

I've added a preloader and i have (not) sorted the problem.

[alvarotrigo]

Yeah. You can rather add the class fp-sectionto your sections, or use:

.section.fp-table{
    display: table;
    table-layout:fixed;
    width: 100%;
}

[nnabros]

Apart from this CSS fix, is there any other thing that can be done because this doesn't work for me.

[alvarotrigo]

It it doesn't work for you is because you are not using the right classes.

That, or CSS is totally broken lol 😆
It is a css solution, there's no mystery here :) It always works when using the right classes. So read my answer careful and apply it :)

To prove it, here's the reproduction:
https://jsfiddle.net/s30djyt2/

[nnabros]

It doesn't work if the first section is a video.

[alvarotrigo]

Then you'd better ask in some place such as stackoverflow.com where they'll be able to help you much better, as that's a CSS issue and not a fullPage.js one :)

[merchantweb]

@alvarotrigo It is somewhat a fullpage issue bc of the way they've designed it. For instance, in the event that you have horizontal slides enabled on the first section and the second slide set to appear on page load; the 1st slide appears for a moment in place of what is desired to show at the top of the web page. Therefore, even if you have set the section heights to fill the viewport, you will experience a jump because slide 1 will show before the default slide 2. This is not a usual case, but depending on the way a user wants their site to behave, it can be an issue. The only real solution is to hide the body or non active slides until fullpage loads or have a preloader. I believe there are other sliders that do not have this issue.

[alvarotrigo]

@merchantweb for fullPage.js to help you with this you should:

• Be using the default fullPage.js CSS classes (and tell fullPage.js about it)
• Use a specific selector for your fullpage.js wrapper that fullPage.js will require (for example #fullpage)
• Tell fullPage.js you will for sure be initialising fullPage.js on page load.

So the most I can probably do to solve this issue for others is telling them to include a specific class on their HTML markup, for example, fp-init-on-page-load so I can apply those styles by default before even initialising fullPage.js. They would get applied when the fullpage stylesheet is loaded and the HTML parsed.

But of course, this would only work if they use the default classes (which many people don't) and a specific selector for the fullpage.js wrapper. So at the end of the day probably the best solution is just adding some instructions on the docs and telling them to add the same styles I proposed on my first answer on this topic.

html,
body,
#fullpage,  /* or your custom fullpage wrapper selector */
.section, /* or your custom section class */
.fp-tableCell {
    height: 100%
}

If you have a better idea I'll be all ears :)

[merchantweb]

@alvarotrigo I understand setting height to 100%. However, If you have a top section with horizontal slides and default slide other than first slide; or slides less than 100vh, then you will still see a layout change/ jump when fullpage loads. To solve this I'm thinking about hiding all non active slides until fullpage loads

[alvarotrigo]

@merchantweb yeah probably the best thing you can do there is using a loader or hiding the page until fullPage.js gets initialised.
We could perhaps implement this directly into fullPage.js as an option, so people who's page has many blocking elements like might be yours, might want to use this to avoid the flicker at the expense of making the user wait more to get the content.

But you can easily implement this in your side anyways.
Just use visibility: hidden and on the afterRender callback take it off so it becomes visible again.

[nnabros]

The solution for me was to hide all other slides on load except the first
using CSS.

On Sun, Jan 3, 2021 at 11:28 AM Álvaro [e-mail] wrote:

@merchantweb https://github.com/merchantweb yeah probably the best
thing you can do there is using a loader or hiding the page until
fullPage.js gets initialised.
We could perhaps implement this directly into fullPage.js as an option, so
people who's page has many blocking elements like might be yours, might
want to use this to avoid the flicker at the expense of making the user
wait more to get the content.

But you can easily implement this in your side anyways.
Just use visibility: hidden and on the afterRender callback take it off
so it becomes visible again.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/alvarotrigo/fullPage.js/issues/3425#issuecomment-753665118,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AEOQVIZ6ESTR33QB72JOIMTSYDANJANCNFSM4FXSEZBQ
.

[merchantweb]

@alvarotrigo I would only turn the option on if necessary. In this case we are using fullpage to make a site function similar to html5 presentations and the first section happens to need horizontal navigation left and right. I'm working within fullpage for elementor so I'll have to figure out how to do that but it makes sense. @nnabros that's what I was thinking of doing for horizontal slides without active class.

To hide inactive horizontal slides until fullpage for elementor loads I've added a class called 'slHide' to the inner sections and used the following css and js:

CSS

.slHide {
  visibility:hidden;
  height:0
}

JS

jQuery(".fp-slides").ready(function( $ ) {
  setTimeout(function() {
    $('.slHide').css({"visibility": "visible", "height": "inherit"});
  }, 500);
});