Issue occurs when this animated svg is present

Deleted: ghost-logo-2.svg 6.6 KB

ghost-logo-2.svg 6.6 KB Download

accessing it by file:///C:/Users/john/Desktop/site.html eliminates it but via localhost not

gozetero@ -- Thanks for reporting this issue. Could you please share the screenshot of good and bad behavior. This would help us in identifying the issue and to triage accordingly. Also, you can verify by updating you Chrome to latest #66.0.3359.117.

Please share your OS details as well.

Thanks in advance!

Where are the svg files referenced by the site.html file? Are they even necessary?

Could you reduce the site to the smallest set necessary to reproduce the problem? There's a lot of CSS and HTML in there that does not seem relevant.

I verified that the steps mentioned makes the frame rate drop (a bit, ~5 fps or so on my machine.) I think what is happening is that a layout is triggered for each frame of the animation within the <img> (the SVG above), because we are not able to tell that the intrinsic dimensions didn't change, and thus trigger (a fairly expensive) layout. Specifying 'height' on the <img> makes it go away, lending some credence to the theory. (Presumably it can't be reduced too much, or the layout that is triggered will not be sufficiently expensive.)

I see the intrinsic size flip between two different values every fifth frame or so. (Not directly obvious why...)

Looks like this is caused by rounding differences (or different ways of computing/getting the intrinsic size.)

It should be possible to work around by either removing the 'width' and 'height' ('... width="150mm" height="150mm" ...') from the SVG (ghost-logo-2.svg), or changing it to any other value. (150mm resolves to 566.929134px, and that fractional part makes things sad in this case.)