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

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-image s for my elements, and used PNGs instead, it improved to about 20-30 FPS.

Cross The Road

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

Originally posted at 2018-12-10 01:08:19+00:00. Automatically generated from the original post : apologies for the errors introduced.

original post