Bug 219379 – CSS keyframe animation on SVG is smearing background

• Status: NEW
• Component: Animations

[Caleb]

Created attachment 415073 [details]
Video of SVG animation on Safari 14.0.1 (16610.2.11.51.8)

When the box element is clicked, I have an animated SVG where two dots transform into lines to form an "X".
As the animation runs, as the shapes are animated, they leave behind a silhouette of themselves ( I call smearing ) and they remain even after the animation ends.

Also shows same bug on Safari IOS 12.4.7
Demo: https://aquaductape.github.io/CSS-Animation-SVG-Smear-in-Safari/index.html
Source code of Demo: https://github.com/aquaductape/CSS-Animation-SVG-Smear-in-Safari

I made a Stack Overflow post about this https://stackoverflow.com/questions/65082644/css-keyframe-animation-on-svg-is-smearing-background-in-safari

[Smoley]

Thanks for filing, I can reproduce this on Safari 13.1.3 as well as STP 116 (14.1).

[Radar WebKit Bug Importer]

<rdar://problem/71865841>

[Ahmad Saleem]

I am able to reproduce this bug on WebKit ToT (262952@main) using test case from Comment 0. Just wanted to share updated testing results. Thanks!

[Ahmad Saleem]

(In reply to Ahmad Saleem from comment #3)
> I am able to reproduce this bug on WebKit ToT (262952@main) using test case
> from Comment 0. Just wanted to share updated testing results. Thanks!

WebKit ToT [264301@main] (with some SVG patches) - I don't get any smear in this.