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;
}
Created
October 12, 2018 08:42
-
-
Save electrotype/7960ddcc44bc4aea07a35603d1c41cb0 to your computer and use it in GitHub Desktop.
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>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This also works if you add another style tag at the end of your body with