Recently I have been combatting the notorious White Flash on page load, and then FUOC.
I utilized https://stackoverflow.com/a/53364612/11706514, which fixed the FOUC but brought back the White Flash.
Top of HTML Head
<!doctype html>
<html>
<head>
<style>html{visibility: hidden;opacity:0;}</style>
Bottom of Final/Only .CSS
html {
visibility: visible;
opacity: 1;
}
I cannot figure out how to effectively combat both. FOUC takes priority, but the White Flash can be pretty jarring. I have both a loading modal and a solid background-color that I would like to isolate from the current fix if possible, but also many elements so I fear that more complex fixes would take too long to beat FOUC.
Simple solutions would be best, and my page heavily relies on JS for it's core features so a pure CSS solution is not needed.
