Perché le prestazioni di scorrimento SVG sono molto peggiori del PNG?

Question

Un sito su cui sto lavorando mostra un numero elevato (> 50) di immagini SVG complesse in una finestra di dialogo a scorrimento. Quando visualizzi il sito in Chrome, le prestazioni di scorrimento della finestra di dialogo sono molto scarse - è notevolmente lenta e lenta. Tuttavia, se sostituisco le immagini SVG con immagini PNG, lo scorrimento è perfettamente uniforme e reattivo.

Ecco una dimostrazione della differenza: https://jsfiddle.net/NathanFriend/42knwc1s/

Perché la SVG scrolling prestazioni in modo molto peggiore la performance di scorrimento PNG? Dopo che il browser esegue il rendering di un'immagine SVG, presumo che non sia necessario rieseguire l'immagine finché l'immagine non viene manipolata in qualche modo (come il ridimensionamento). Lo scorrimento di un elemento che contiene immagini SVG fa sì che le immagini vengano rasterizzate per ogni fotogramma dell'animazione di scorrimento?

                      ` 

Answer 1

Penso che questa sia solo una sorta di un bug cromo, ho trovato questo problema in SO, perché ho iniziato sperimentando pure su Mac. Ad esempio, funziona bene su Opera.

Non penso che nessuno qui sarà in grado di spiegare perché è lento se è davvero un bug. Ho creato un bug di Chromium, perfavore se vuoi che il problema venga risolto presto o ulteriori informazioni https://bugs.chromium.org/p/chromium/issues/detail?id=681611