Bug 219379

Summary: CSS keyframe animation on SVG is smearing background
Product: WebKit Reporter: Caleb <aquaductape>
Component: AnimationsAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ahmad.saleem792, dino, graouts, sabouhallawa, smoley, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: Mac   
OS: macOS 10.15   
Attachments:
Description Flags
Video of SVG animation on Safari 14.0.1 (16610.2.11.51.8) none

Description Caleb 2020-11-30 16:22:35 PST 
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
Comment 1 Smoley 2020-12-01 13:52:05 PST 
Thanks for filing, I can reproduce this on Safari 13.1.3 as well as STP 116 (14.1).
Comment 2 Radar WebKit Bug Importer 2020-12-01 13:52:25 PST 
<rdar://problem/71865841>
Comment 3 Ahmad Saleem 2023-04-14 16:35:20 PDT 
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!
Comment 4 Ahmad Saleem 2023-05-21 05:51:50 PDT 
(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.