electrotype/FOUC-fix.md

Created October 12, 2018 08:42

Star (19) You must be signed in to star a gist
Fork (4) You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/electrotype/7960ddcc44bc4aea07a35603d1c41cb0.js"></script>
Save electrotype/7960ddcc44bc4aea07a35603d1c41cb0 to your computer and use it in GitHub Desktop.

Download ZIP

Raw

FOUC-fix.md

Fix for FOUC :

At the top of your HTML:

<!doctype html>
<html>
<head>
    <style>html{visibility: hidden;opacity:0;}</style>

At the end of your last .css file:

html {
    visibility: visible;
    opacity: 1;
}

jafrajarvy292 commented Feb 20, 2021

This also works if you add another style tag at the end of your body with
<style>html{visibility: visible;opacity:1;}</style>

This seems to work for me and is the most convenient. I'm using a a framework for my project and so, while I can add the <style> group in my <head>, I have little control over where the html style appears in my css file. This is what I end up with and it works.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        html {
            visibility: hidden;
            opacity: 0;
        }
    </style>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    [...]
    <style>
        html {
            visibility: visible;
            opacity: 1;
        }
    </style>
</body>
</html>