CODEWITHSUNDEEP
performancegoogle-chromesvgpngrender
Nathan Friend
Nathan Friend

Reputation: 12834

Why is SVG scrolling performance so much worse than PNG?

A site I'm working on displays a large number (>50) of complex SVG images in a scrolling dialog window. When viewing the site in Chrome, the scrolling performance of the dialog window is very poor - it is noticeably laggy and slow. However, if I replace the SVG images with PNG images, the scrolling is perfectly smooth and responsive.

Here's a demonstration of the difference: https://jsfiddle.net/NathanFriend/42knwc1s/

Why is the SVG scrolling performance so much worse than the PNG scrolling performance? After the browser renders an SVG image, I would assume it doesn't need to rerender the image until the image is manipulated in some way (like resizing). Does scrolling an element that contains SVG images cause the images to be rerendered for every frame of the scroll animation?


                                                                                          `

Upvotes: 11

Views: 4542

Answers (1)

Jan Vorcak
Jan Vorcak

Reputation: 20019

I think this is just some kind of a Chromium bug, I've found this issue on SO, because I started experiencing it as well on Mac. It works OK on Opera for instance.

I don't think anyone here will be able to explain why it's slow if it really is a bug. I've created a Chromium bug, please star it if you want the issue to be fixed soon or learn more https://bugs.chromium.org/p/chromium/issues/detail?id=681611

Upvotes: 9

Related Questions