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.

@tsturm @freakazoid @aral My little SVG web app which is a SVG document with some Javascript and some XHTML included was nearly driving me insane until I decided to simply deactivate elements known not to work. And so, it „degenerates gracefully“ depending on browser, based on error reports. 🤷‍♂️
But yeah, it does feel like walking beyond the known lands…

@kensanata @aral @tsturm Ugh that's terrible.

Had I had the time to continue working on Claspin I had planned to move it over to Canvas, even though that wouldn't have worked nearly as well with D3. SVG was just too buggy and slow.

@kensanata @aral @freakazoid @tsturm I have no need for this but it is super-sweet. Request: if you can support hover-tips or something to explain all the pretty tiles it would be neat

@sivy Haha, funny you should say that. On some browsers, there are such help texts! The XHTML elements have title attributes which are sometimes rendered and sometimes they are not.
@aral @tsturm @freakazoid

@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.