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.
@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 https://www.facebook.com/notes/facebook-engineering/monitoring-cache-with-claspin/10151076705703920 .
@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.
This is my personal Mastodon.