So this is interesting, in order to get an SVG background image on a dynamically-generated element to preload, the only way that I‘ve been able to find that works is to create literally the same element and add it to the DOM first.

Things that didn’t work:

* Making an SVG sprite sheet and adding that to the DOM
* Inlining the SVG as data
* Preloading via JS (new Image() //etc.)
* Preloading the images via link rel="preload"

@aral Huh. Do Chrome and Firefox behave the same on this one? It feels like this could be implementation-dependent.

@tsturm @aral My experience with Firefox vs Chrome is that both their SVG implementations are buggy as shit, especially when you're using CSS.

@freakazoid @aral Yes, working with SVG in browsers often feels like exploring just beyond the map of the known world.

It's probably the least tested part of most browsers due to the insane number of possible combinations of graphics/DOM/SVG...

@tsturm @aral Yeah so hard to test when they have such piddly test infrastructure and are so heavily reliant on manual QA.

@freakazoid @aral I'm not even sure it is possible to completely test all combinations of HTML/CSS/Canvas/SVG - there are some subtleties of the sub-pixel rendering that is very platform/OS/GPU dependent and is probably outside of any W3C spec.

@aral @tsturm I used SVG and CSS for Claspin and it was a question of choose your bug. The Firefox bug was slightly less bad so I used it for the screenshots for my blog post on it, though in retrospect the FF bug was that it looked ugly even statically while the Chrome bug was that when I removed a CSS class it wouldn't re-render, so maybe I should have just reloaded the page repeatedly or faked it so I could get pretty screenshots.

@tsturm @aral The Firefox bug was that even though I was rendering a bunch of rectangles that were butted right up against each other, the background would show through between them. You can see it in the close-up screenshots at .

@tsturm Yeah, seemed to be cross-platform/cross-browser/cross-rendering engine behaviour.

@aral Browser engines always agree with each other when their behavior is inconvenient to web developers. 😅

@aral Thanks for yet another reminder that computers don’t work and all software is terrible!

That might read as though I’m being sarcastic. I’m not.

Sign in to participate in the conversation
Aral’s Mastodon

This is my personal Mastodon.