Firefox keeps Firefoxing

A bug that I saw with one of our web apps. The bug was there, except no-one has complained about it. But I saw it. I wasn't really a bug, more like a visual annoyance.

Essentially, when our SPA loads there is an SVG preloader. Something like

import Preloader from './preloader.svg?react'

// .....

return <Preloader className="size-5" />

The svg is converted to React component with vite svgr plugin. The original svg has a size of 1024x1024, where as size-5 makes it 20px. There are a bunch of other css that is in @base layer.

The problem was that when I'd develop an app, I would often see the preloader svg without any styles applied that would render at the original 1024px size. Like seriously, sir WTF?

I thought that maybe I need to figure out how to inline @base css layer into html itself. But then, while building this blog (which is a simple pre-rendered react-router app), I noticed that the css is not applied as well. Even if the css file itself is cached.

Here is the video to demonstrate the behaviour.

For some reason, Firefox does not apply css until the load event is emitted, while the DevTools is open. This issue does not exist on Chromium and I could not reproduce the effect on Safari.

And that kids, how I ~met your mother~ wasted a few hours trying to chase the bug in my code.