Flash of unstyled content (FOUC)

Created on 18 August 2023, over 1 year ago
Updated 28 December 2023, over 1 year ago

I use this (or subthemes thereof) on a bunch of sites - it's my go-to solution for Drupal 10 and I thank you!

I have one issue, though, that seems to be consistent across all sites: a flash of unstyled content (FOUC) before the page loads. Aggressive caching can mitigate it somewhat, but with AdvAgg having problems with 10.1, that's one solution I can't use at the moment.

I've seen suggestions to hide the page using CSS when first loaded (easy) and turning visibility back on after the CSS is loaded (I haven't been able to get this to work); I'm wondering if there's anybody who has any suggestions here.

Thanks in advance for any assistance!

πŸ’¬ Support request
Status

Postponed: needs info

Version

3.0

Component

Miscellaneous

Created by

πŸ‡ΊπŸ‡ΈUnited States bcobin

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @bcobin
  • Status changed to Postponed: needs info over 1 year ago
  • πŸ‡¦πŸ‡ΊAustralia jannakha Brisbane!

    Hi bcobin

    yeah there are quite a few issues I discovered with flex box and CLS metrics too.

    have you got an example site that is most affected by the issue? just curious how heavy the styles are on it.

    have you tried this example?
    https://medium.com/@fbnlsr/how-to-get-rid-of-the-flash-of-unstyled-conte...

  • πŸ‡ΊπŸ‡ΈUnited States rhovland Oregon

    I get this too, but only on Firefox in my dev environment (no caching). It seems to happen when I make a css change that causes drupal to calculate something in the background. Seems almost like a browser caching issue trying to use old files that no longer exist or something. I have never seen it in production or on Chrome.

Production build 0.71.5 2024