Poor performance in Chrome (especially on mobile) - caused by SVG background images

December 10, 2018 [Uncategorized]

I have spent the last few hours investigating abysmal performance in my latest little game project Cross The Road. Firefox was fine, but Chromium and Chrome, especially on mobile, was rendering at about three frames per second.

When I stopped using SVGs as background-images for my elements, and used PNGs instead, it improved to about 20-30 FPS.

It seems fine to use SVGs as normal images, but for background-image, it really hurt performance.