@SolarPunker@slrpnk.net to Firefox@lemmy.world • 2 days agoHow can I prevent white flash?message-square10fedilinkarrow-up144arrow-down10file-text
arrow-up144arrow-down1message-squareHow can I prevent white flash?@SolarPunker@slrpnk.net to Firefox@lemmy.world • 2 days agomessage-square10fedilinkfile-text
minus-squarejuttylink5•edit-22 days agoSome websites are really cursed in how hard they make overriding their styles. Some things I usually do to handle these are using Stylus with Instant inject mode and some !important rules for a global dark theme. If that also fails, I have an anti-Flash-of-Unstyled-Content userscript ready to toggle per-website as needed: ;(function() { const css = ` html, body { background: #222 !important; min-height: 100vh !important; } body > * { visibility: hidden !important; } ` const style = document.createElement('style') style.id = 'antiFOUC-block' style.textContent = css const container = document.head || document.documentElement container.prepend(style) window.addEventListener('DOMContentLoaded', () => { const block = document.getElementById('antiFOUC-block') if (block) block.remove() document.body.childNodes.forEach(n => { if (n.nodeType === 1) { n.style.visibility = '' } }) }) })() It works by preventing display of content before it’s fully loaded. This won’t make websites dark on its own, just prevent the flash. (I have tested this with Violentmonkey on boardgamegeek.com plus a Stylus dark theme and it did solve it. With Dark Reader though it will still flash) If even that fails I have a second one that will strip all inline and !important styles, but it rarely ever comes to that. I hope this is helpful because being flashed with a fully white page makes me want to cry and punch my computer.
minus-squareVictorlinkfedilink2•2 days agoBy the way, const block = document.getElementById('antiFOUC-block') Is this necessary? Isn’t there a reference to this node already via the style identifier?
minus-squarejuttylink1•2 days agoI guess, but: my JS skills are horrific I have a habit of avoiding all outer and/or global state like the plague
minus-squareVictorlinkfedilink1•2 days ago Fair enough 😁 IMO it’s more of a closure than global state, since this is an isolated function/IIFE. 👍 But it’s up to you! 😊
Some websites are really cursed in how hard they make overriding their styles.
Some things I usually do to handle these are using Stylus with Instant inject mode and some
!importantrules for a global dark theme.If that also fails, I have an anti-Flash-of-Unstyled-Content userscript ready to toggle per-website as needed:
;(function() { const css = ` html, body { background: #222 !important; min-height: 100vh !important; } body > * { visibility: hidden !important; } ` const style = document.createElement('style') style.id = 'antiFOUC-block' style.textContent = css const container = document.head || document.documentElement container.prepend(style) window.addEventListener('DOMContentLoaded', () => { const block = document.getElementById('antiFOUC-block') if (block) block.remove() document.body.childNodes.forEach(n => { if (n.nodeType === 1) { n.style.visibility = '' } }) }) })()It works by preventing display of content before it’s fully loaded. This won’t make websites dark on its own, just prevent the flash.
(I have tested this with Violentmonkey on boardgamegeek.com plus a Stylus dark theme and it did solve it. With Dark Reader though it will still flash)
If even that fails I have a second one that will strip all inline and
!importantstyles, but it rarely ever comes to that.I hope this is helpful because being flashed with a fully white page makes me want to cry and punch my computer.
By the way,
Is this necessary? Isn’t there a reference to this node already via the
styleidentifier?I guess, but:
Wow, a Flash of Unstyled Content Killer. Nice.