Fix FOUC ‘flash of unstyled content’ on WordPress
FOUC aka ‘flash of unstyled content’ is a bit of a pain after a layout has been put together but does not load without that flash of odd content jumbled up on load.
Using a snippet of jQuery by adding and later removing a CSS class of hidden to the html element but then showing it all when the document is ready is a good way to combat FOUC.
add_action('wp_head', 'fouc_protect_against'); /** * Combat FOUC in WordPress * @link https://stackoverflow.com/questions/3221561/eliminate-flash-of-unstyled-content */ function fouc_protect_against () { ?> <style type="text/css"> .hidden {display:none;} </style> <script type="text/javascript"> jQuery('html').addClass('hidden'); jQuery(document).ready(function($) { $('html').removeClass('hidden'); }); </script> <?php }
Add in your functions.php
Works great but just wondering, are there any negatives to implementing this?
Such as, does it slow down website loading, etc?
Hi: I used this snippet in Code Snippets, but it comes back with an error:
The snippet has been deactivated due to an error on line 7:
Cannot redeclare function fouc_protect_against.
Line 7 is ?>
What am I doing wrong?
Seems like the snippet is in the file twice
left a thanks comment but thought I would let people know how I implement this in wordpress.
I use a Code Snippet plugin to add stuff like this – avoids getting trashed by theme updates – not that people use themes these days.
I add a new snippet paste the code in .. call it something like FOUC fix set the priority to 1 save / activate and boom problem solved.
Nice work – thanks for this!
Any idea where i can place the code in divi?
You need to add it to your themes functions.php file
Usualy I don’t let comment but for this time… just thank a lot….
After update on WordPress 5.6 the flash is back. Is there a new code necessary?
Got a Wordfence error. Whitelisted it but are there any concerns I should know about?
Potentially unsafe operation detected.
You are the best !! Had a FOUC problem problem at work and this worked perfectly ! Thank you so much !!
Thank you! Worked like a charm
Thanks so much for this. I’ve been asking my theme support people to help and they kept wanting to help me remove my sticky nav bars. I sent it to them for the next person who pays attention to details. :) big, big thanks!
Hi,
is this piece of code now working, and could you provide help of using it?
So can I just place it one the additional CSS box or HTML box?
So far i am only generating errors :).
And do you know if this code is going to fix my text flashing problem on my site
https://www.jussitamminen.com/ ?
Thank you in advance!
br
Jussi
Ok,
I read the post better and added the code into correct functions.php file.
However, this code did not remove the problem and it also made the page much slower.
Jussi
Thanks! It’s working!!
Does not fix the flash of unstyled content on my website
I’d been looking for ages for a solution to this – THANK YOU! Works great.
Works perfectly! Thanks for that!
Thanks, it works now!
I tried this but it made the whole page white and never loaded the content, even after waiting a while.
I had an error in the code, have updated it now.