Flickering when loading

itecologyresearch · Member · Oct 30, 2018 at 9:33 am
Copy link

Add topic to favorites
Hello,

I know this is absolutely not a new topic, but so far, none of the solution I’ve found would help me.

When loading our website, the web banner flickers from orange to the actual pictures we want to load, and we can notice Flash Of Unstyled Text. This happens both on Firefox and Chrome, I have not tried other browsers. We have converted to Premium plan in order to be able to change the CSS, but there is no change in the loading process, even adding the lines
```
html {
	font-family: "Ubuntu", sans-serif;
}

body:not(.loaded) #slider img {
	display: none !important;
}

.wf-loading body {
	visibility: hidden !important;
}
```
(yes, I’ve tried different things…)
I’m very new to CSS, so I guess the solution is the right in front of me… but I can’t see where!

Thank you very much for any advice,
Cheers

The blog I need help with is: (visible only to logged in users)
wpx2 · Member · Oct 30, 2018 at 11:06 pm
Copy link
Hello @itecologyresearch

I have checked your website and as far as I can tell that the orange color is there because the actual background of the header is set to orange color. Use the following CSS code to remove that orange color:
```
.header-bg {
    background-color: transparent !important;
}
```
The flash effect you see upon loading the page will still be there because CSS alone can’t remove it as it has something to do with Javascript/Jquery.

With CSS code above, the color may look white though.

Please implement that CSS code and let us see how it is going to look after.
kokkieh · Staff · Oct 31, 2018 at 6:44 am
Copy link
Hi there,

The following CSS should prevent FOUT from happening:
```
.wf-loading body {
visibility: hidden;
}
```
When you used it before, did you use it on your own, or along with the other code you mention above? Please try using only this one declaration on its own.

The header background loading before the header image cannot be avoided – changing the order in which elements on the page load cannot be done with CSS. But making the background colour transparent as suggested above should lessen the effect.
itecologyresearch · Member · Oct 31, 2018 at 8:04 am
Copy link
Hello,

Thank you so much for your answers. I have modified the CSS with (and only with) the two declarations you suggested and it’s already a lot better.
I still see a change in the font size of the header in some cases, is it possible to avoid this?

Thank you
kavyagokul · Staff · Oct 31, 2018 at 8:44 am
Copy link
Hi there!

This should be a slightly better css code that should prevent this from happening. You will need to modify the code shared before to this:
```
.wf-loading body,
html:not(.wf-active) body {
	visibility: hidden;
}
```
Please let us know if you still gave any trouble with this. Thanks!
itecologyresearch · Member · Oct 31, 2018 at 9:14 am
Copy link
Thanks! I tried but I sill get the font size change. Is it due to the theme I chose? Is there any way to avoid this?
kokkieh · Staff · Oct 31, 2018 at 10:27 am
Copy link
Please try adding this in addition to the CSS you already have:
```
html:not(.wf-active) h1,
h1 {
  font-weight: 400;
}
```
(this code also comes from @grvrulz :) )
itecologyresearch · Member · Oct 31, 2018 at 10:39 am
Copy link
This works, thanks to everyone!
kokkieh · Staff · Oct 31, 2018 at 2:00 pm
Copy link
Excellent! Thanks for letting us know.

No items found.