Сайт, над которым я работаю, отображает большое количество (> 50) сложных изображений SVG в диалоговом окне с прокруткой. При просмотре сайта в Chrome производительность прокрутки диалогового окна очень низкая - она ​​заметно отстает и работает медленно. Однако, если я заменю изображения SVG изображениями PNG, прокрутка будет совершенно плавной и отзывчивой.

Вот демонстрация разницы:https://jsfiddle.net/NathanFriend/42knwc1s/

Почему производительность прокрутки SVG намного хуже, чем производительность прокрутки PNG? После того, как браузер рендерит SVG-изображение, я предполагаю, что ему не нужно перерисовывать изображение, пока изображение не будет каким-либо образом манипулировано (например, изменением размера). Вызывает ли прокрутка элемента, содержащего изображения SVG, изображения для каждого кадра анимации прокрутки?

                                                                                          `