After reading this great article Using SVG as placeholders — More Image Loading Techniques by José M. Pérez , I decided to show a lightweight SVG background and then load a full background image.
Here is a workaround I used to get around the flickering issue.
The initial attempt was to set
Codepen example doesn’t flash but the transition from SVG to full image is not gradual.
Here is how the site looked on the landing page. First browser shows Chrome, which works fine but the 2nd browser (FireFox Quantum) flickers 😱 as if you get flashed by a 📷.
Instead of replacing the background, load the full image in another tag and layer the full image on top of SVG.
And now SVG looks like it’s fading away as a full image loads on FireFox & IE.
I am just getting used to the front-end development and this issue has taken me 2 days to test many of Google results and failures.
I’d appreciate it if anyone can suggest me another workaround and/or how I can improve my current code base, which is available on GitHub.