Warning: Layout Display was Forced Before The Page was Fully Loaded - Question | JoomShaper
shape
50% off
shape

Warning: Layout Display was Forced Before The Page was Fully Loaded

BOFHJunior

BOFHJunior

General 2 weeks ago

I am using SPPB v5.1.8, Helix Ultimate v2.0.17 & Page Layouts "Florist". No Template is used.

Hello Support, i have a problem with my Website.

When i load it, the content is shown for a second, then it's white again, finishs loading and shows the content as expected with my settings like "Animation Fade Direction left" and so on. This behavior happens only on all Page Layout "Florist" pages.

I opened the console and saw this warning: https://prnt.sc/NmgZoJdnqy6f

Translated it means: Layout display was forced before the page was fully loaded. If style sheets are not yet loaded, this may result in the content being displayed for a short time without formatting.

I cannot code Java Script and don't want to touch the mentioned jquery.min.js?3.7.1 to fix that behavior.

Please can you help me to get rid of this behavior?

0
12 Answers
Pavel
Pavel
Accepted Answer
2 weeks ago #137021

Hi.

The page code is loaded in a strict order, in accordance with the placement of code and connected scripts and styles. The next element is loaded only after the previous but not at the same time.

Looks like this:

  1. HTML/CSS (you see static design)
  2. Start animation Javascript (you see blink)
  3. CSS animation action (you see animation action).

This is the expected behavior of the work of animation.

But you can make it work with CSS for each animated addon. List IDs in CSS of all animated addons on first screen.

Example (for Fade effects)

#sppb-addon-1698567682193,
#sppb-addon-1698567682194,
#sppb-addon-1698567682195 {
    opacity: 0;
}
0
BOFHJunior
BOFHJunior
Accepted Answer
1 week ago #137707

Hello Pawel and Rashida, sorry for the delay, i had no time.

My mistake, i forgot to add the information, that the content is only shown for a second with the Browser Firefox. When using Edge or Chrome the Website loads as expected.

@ Pawel I tried your CSS Code and it works for the Addon "Text Block" but if i use it for the Addon "Button" the Button dissapears after the animation has finished.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 2 weeks ago #137328

Hi BOFHJunior,

Did you check Pavel's answer? Kindly do let us know.

Best Regards

0
Pavel
Pavel
Accepted Answer
1 week ago #137745

but if i use it for the Addon "Button" the Button dissapears after the animation has finished.

Hi @BOFHJunior .

This is not related to an addon, but depends on the type of animation. My example works with animation effects which have 100% key containing opacity. These are all types of Fade effects.

But if, for example, ZoomIn effect is used, this will not work by default, since ZoomIn animation does not have a 100% key .

This is what I mean. This is a ZoomIn animation from the box.

@-webkit-keyframes zoomIn {
    from {
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3);
    }
    50% {
        opacity:1;
    }
}
@keyframes zoomIn {
    from {
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3);
    }
    50% {
        opacity:1;
    }
}

As you can see there is no 100% key. Only 50% key.

To solve the problem, you need to copy all this animation, add 100% key to it and place it after the code for your addon.

Something like this

/*Code for addon*/
#sppb-addon-xxxxxxxxxxxxx {
    opacity: 0;
}
/*Corrected animation*/
@-webkit-keyframes zoomIn {
    from {
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3);
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
}
@keyframes zoomIn {
    from {
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3);
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
}

Hi @Rashida. It would be great if you shared this topic to the developers.

This is an old problem that does not allow the use of animation on the first screen (in Firefox) without additional skills.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 week ago #138316

Hi Pavel,

Thanks for sharing. I will check and share with the developer team accordingly.

Have a nice day!

0
BOFHJunior
BOFHJunior
Accepted Answer
1 week ago #137832

Hello Pavel, thank you for your detailed explanation. I didn't understood everything especially this 100% key thing but i think i understood the most important thing.

I saw now, that i use the Bouncy Animation for the Button addon: https://prnt.sc/0eFsz_8ZIAKb

I changed it to Fade and added the ID to my custom.css and it works.

@ Rashida

Please take a look with the development team to solve this issue. This happens when using the Animations "Zoom" and "Bounce" and also with Interaction "While Scrolling Into View".

@ Pavel

For your information. This behavior happens on every page using these types of animations, not only the first one. :-(((

0
Pavel
Pavel
Accepted Answer
1 week ago #137848

I didn't understood everything especially this 100% key

Hi. It is about this parts of code, that are not exist in the code from the box

For your information. This behavior happens on every page using these types of animations, not only the first one. :-(((

I did not talk about the first page, but about the first screen. The first screen is the upper part of any page that is loaded first in the visibility of your monitor.

0
BOFHJunior
BOFHJunior
Accepted Answer
1 week ago #137864

Ahh now i understand it better.

Thx for the clarification, i mixed page and screen.

@ Rashida

Any Update here?

0
BOFHJunior
BOFHJunior
Accepted Answer
1 week ago #137928

@ Rashida

Any Update here?

0
BOFHJunior
BOFHJunior
Accepted Answer
1 week ago #138153

@ Rashida

Any Update here?

0
BOFHJunior
BOFHJunior
Accepted Answer
1 week ago #138313

@ Rashida

Any Update here?

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 week ago #138317

Hi BOFHJunior,

Sorry for the delayed response. I will check and share with the team accordingly. Please allow us time.

Have a nice day!

0