11

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?


                                                                                          `
Nathan Friend
  • 12,155
  • 10
  • 75
  • 125
  • It doesn't seem hugely different on Chrome for OS X. Is this a Windows Chrome problem? – Glenn Howes Jan 19 '16 at 12:00
  • I am seeing it on Chrome on Windows 8.1. – JosiahDaniels Feb 05 '16 at 18:39
  • I'm seeing this in OSX –  Mar 09 '16 at 08:29
  • I've a similar issue, it's not just bad performance it crashes the chrome tab from a bunch of tiny svg images. Unbelievable this sort of behaviour was not noticed at the quality control – John Sep 26 '17 at 02:40
  • Did you ever find a solution to this? I noticed it as a problem on Chrome Android too, with 5 SVG images and around 15 SVG icons. Rendering was very slow. After reading about the bug I replaced all SVG's with PNG. It's disappointing! – Drenai Feb 24 '19 at 13:03
  • @Drenai Nope, I don't think I did :( – Nathan Friend Feb 24 '19 at 13:30

1 Answers1

9

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

Jan Vorcak
  • 19,261
  • 14
  • 54
  • 90