I ran into this problem 11 years ago and blogged it.
The problem is preserved in this video that shows a hilariously early version of CodePen and how some CSS transitions are firing early and causing the page load to look weird.
That old blog post used jQuery and old CSS prefixes, and someone just emailed me about it, so this is the lineup I’d use today if I had that problem:
<body class="preload">Code language: HTML, XML (xml)window.addEventListener("load", () => {
document.body.classList.remove("preload");
});Code language: JavaScript (javascript).preload * {
transition: none !important;
animation-duration: 0.001s !important;
}Code language: CSS (css)The transitions and animations will work fine after the page is fully loaded and the initial preload class is removed.
Hi Chris!
Just FYI — I noticed that my feed reader displayed the code blocks with language names inlined:
Code language: HTML, XML (xml)
So maybe there’s something wonky in the RSS conversion?
Cheers!
Don’t see any obvious fix for it on the plugin I use, but I reported issue and will track here https://github.com/westonruter/syntax-highlighting-code-block/issues/714
Is this generally a bad idea? Not showing stuff before page is loaded? I’d like to do it, but it makes page feel slower…