FOUC - Flash of unstyled content

Themes
#1

Hello there,

This Inspiro theme related problem bothering me for a long time. I even spoke about it with Hassan from support here, but he couldn’t help me out, so maybe anyone who had this issue can point me on how to fix that.

I found that it is a common styles problem, and it’s called Flash of unstyled content FUOC

I did some research about FUOC, and it’s comes up. That there is a number of snippets that could fix that. Unfortunately, none of them is working for me.

Here is the site I’m having a problem with: https://www.mynature4k.com/

Would appreciate any help!
Thank you.

#2

Hello,

Can you please describe more details about this problem. How do you see it on your website?

Does it happen to you when looking at Inspiro’s demo site too?

#3

Hello Pavel,

Thank you for the fast replay.
Well, Flash of unstyled content is easy to spot at my site :slight_smile:
The menus jumping to the right, then to the left. Also, background pictures, for example at this page https://www.mynature4k.com/nature-hd-wallpapers/ is loading only after that disturbing flash.

AT Inspiro demo site, same story. The menus jumping same way, to the left, then to the right.
:slight_smile:

#4

@Olek_de FOUC is something totally different and it occurs when the CSS styles are not loading initially on your website. This is definitely not the case, as CSS loads without any problems on your website.

If your website would be affected by this issue, then it would look like this:

Screen Shot 2021-03-30 at 08.39.10
Screen Shot 2021-03-30 at 08.39.101077×1014 69.1 KB

The issue with the menu happens because the dropdown arrows appear once the page was fully loaded and since it changes the width of items, your menu becomes too long so it jumps in a new line in order to fit.

Try to add this CSS code in the Customizer > Additional CSS and see if it helps partially with the menu issue:

.navbar-nav {
    float: none;
}

Or a better recommendation would be to reduce the number of items or words in the menu items, and then they will fit properly in one line with the dropdown arrow.

As for the background image, it loads just like any other image on all the websites on the web. How else is an image supposed to load?

#5

Well, I totally disagree with you!
The CSS fix just broke up my menu in a very ugly way :slight_smile:

Screenshot 2021-03-30 at 10.40.16
Screenshot 2021-03-30 at 10.40.162880×1644 811 KB

Now, I recorded a little video to show you what I mean with FOUC and then link to the video where it’s explained how to deal with it.



I hope it’s helps :slight_smile:
Thank you!
#6

Any thoughts on how to fix those please? :slight_smile:

#7

@Olek_de Hi,

We’ll fix the problem with the issue with the background image in the next plugin update.

This has absolutely nothing to do with FOUC. The explanation is simple: the theme first loads quickly a small image in a lower quality, and once the larger image is loaded then it appears and replaces the other one.