Flash of Unstyled Content
Opened this issue · 2 comments
Hey, I've noticed the dreaded Flash of Unstyled Content (FOUC) issue with this template. It's noticeable for me on the template preview on Firefox. This might be a Firefox-only issue. After some research, I stumbled on this fix:
While things should run smoothly on Chrome, you might still see a flash on Firefox. I struggled to find a solution to this problem until I stumbled upon a bug in Firefox that’s been reported 3 years ago and is still active. People are still trying to fix this but lucky for us there’s a simple hack we can use as a workaround to this problem. Simply add a dummy piece of JavaScript code right after your tag and you should be all set!
I realize this isn't a "bug" with your code, but funky browser business. I'm happy to resubmit this as a pull request if you like. Otherwise, I present the diff if anyone else wants to fix it.
NOTE: I didn't need the <script>0</script> firefox hack mentioned in the article since I just put the FOUC fix right after the body tag.
# line numbers may not line up!
diff --git a/_layouts/default.html b/_layouts/default.html
index dc74478..9f9853f 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,7 +1,28 @@
<html lang="en">
{% include head.html %}
- <body>
+ <body style="visibility: hidden">
+ <!-- FOUC hack for firefox. ugh!
+ https://medium.com/@fbnlsr/how-to-get-rid-of-the-flash-of-unstyled-content-d6b79bf5d75f
+ -->
+ <script type="text/javascript">
+ // Helper function
+ let domReady = (cb) => {
+ document.readyState === "interactive" ||
+ document.readyState === "complete"
+ ? cb()
+ : document.addEventListener("DOMContentLoaded", cb);
+ };
+
+ domReady(() => {
+ // Display body when DOM is loaded
+ document.body.style.visibility = "visible";
+ });
+ </script>
+
<nav>{% include nav.html %}</nav>
<div class="wrapper">
<main>{{ content }}</main>
@@ -9,5 +30,12 @@
</div>
{% include link-previews.html wrapperQuerySelector="content" %}
+ <noscript
+ ><style>
+ body {
+ visibility: visible;
+ }
+ </style></noscript
+ >
</body>
</html>I am so sorry for this ugly hack :)
Also, I really dig this template. Thanks so much!
always learning... thanks for sharing this fix!
+1 for digging the template :)
#220 may have resolved this. Could you let me know if you still run into a FOUC? If you don't, feel free to close this issue. 🙏