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
Thanks for filing, I can reproduce this on Safari 13.1.3 as well as STP 116 (14.1).
<rdar://problem/71865841>
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!
(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.