Big FOUC (Flash of Unstyled Content) after removing animation

Hello team,

Due to the animation on the homepage, my website was loading very slow. Below is what I did to remove the animation:-

1- First, I tried to deregister this CSS file: https://shopipopy.com/wp-content/plugins/js_composer/assets/lib/bower/animate-css/animate.min.css

Even after I deregistered that CSS file the animation was still coming, then I manually went to each homepage section and removed the animation from settings. Now only the top section animation got removed and rest bottom section animation is still there, I don’t know where it is coming from so that even after disabling CSS file and the animation manually it is still coming.

Now I have 2 issues and I want the solution for this as soon as you can:-

1- I see a big FOUC (Flash of Unstyled Content) on the homepage top section: https://prnt.sc/rvct3a

See the problem here in the video to understand my problem better:- https://drive.google.com/file/d/1hajludD4fwa0Z5hhwTbvtLjIDK1mgyQe/view?usp=sharing

2- Animation still not got removed from the entire page even I tried removing all, please tell me how to remove animation entirely from the homepage because I have turned all the animation setting off from the settings.

Looking forward to hearing from you:)

Thanks!

Hello,

1. You need to disable “Stretch row” for the WPBakery row that contains slider that already set to full width in its settings.

2. Go through all WPBakery rows and disable WPBakery animations for them while editing your home page.

Kind Regards

Thank you for the quick response 🙂

I disabled “Stretch row” from the row setting and FOUC is gone but the design got boxed instead of full width. See below:-

This happened after I disable the “Stretch row” and put it to default: https://prnt.sc/rvf8sf

I want it to be full width like this without FOUC: https://prnt.sc/rvf9dj

Please let me know what is the other solution to keep full width and get rid of FOUC.

Thank you so much!

You need to make this slider full width while editing its settings https://xtemos.com/docs/woodmart/woodmart-slider/slider-settings/

I am using “Main Slider” on the top: https://prnt.sc/rvfm2o

According to you, I went to the setting: Slides<Slider and turned on Stretch slider and Full with content: https://prnt.sc/rvfopp

Now FOUC is again back ):

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue. It seems to be our theme’s bug with RTL and we will fix this in our next theme update.

@media (min-width: 1292px) {
body [data-vc-full-width] {
left: calc((100vw - 1222px) / 2);
}
.platform-Windows body [data-vc-full-width] {
left: calc((100vw - 1239px) / 2);
}
}

Thanks, I see these error on editor page:https://prnt.sc/rvh4a8

It took a very long time to load the editor, sometimes it loads as it will never end ):

Can you tell me why?

These errors seem to be not related to our theme.

[Author]

Posts