Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flash of Unstyled Content #214

Open
riscdanger opened this issue Sep 28, 2024 · 2 comments
Open

Flash of Unstyled Content #214

riscdanger opened this issue Sep 28, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@riscdanger
Copy link

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!
@riscdanger riscdanger added the bug Something isn't working label Sep 28, 2024
@omarcostahamido
Copy link
Contributor

always learning... thanks for sharing this fix!
+1 for digging the template :)

@maximevaillancourt maximevaillancourt mentioned this issue Nov 4, 2024
Merged
@maximevaillancourt
Copy link
Owner

#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. 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@maximevaillancourt @omarcostahamido @riscdanger