Bug 223258

Summary: Weird Artifacts in SVG animation
Product: WebKit Reporter: moritz.mt99
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Minor CC: ap, graouts, koivisto, sabouhallawa, simon.fraser, webkit-bug-importer, zimmermann
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: Mac (Apple Silicon)   
OS: macOS 11   
Attachments:
Description Flags
Example SVG
none
SVG flickering none

Description moritz.mt99 2021-03-16 09:46:03 PDT 
Created attachment 423341 [details]
Example SVG

An animated SVG is behaving weirdly/ causing artifacts

View the attached SVG or visit https://react-icons.github.io/react-icons/ and watch the icon in the top left corner.
The SVG is experiencing some weird flickering when being rotated.

The SVG is rendered correctly in Chrome.

Safari Version: Version 14.0.3 (16610.4.3.1.7)
OS Version: macOS Big Sur 11.2.3 (20D91)
Hardware: MacBook Pro (13-inch, M1, 2020)
Comment 1 Said Abou-Hallawa 2021-03-16 10:26:26 PDT 
Do you see weird artifacts or unexpected flickering when the SVG is animating? I do not see any of them.
Comment 2 moritz.mt99 2021-03-16 11:48:58 PDT 
Created attachment 423371 [details]
SVG flickering
Comment 3 moritz.mt99 2021-03-16 11:58:15 PDT 
(In reply to Said Abou-Hallawa from comment #1)
> Do you see weird artifacts or unexpected flickering when the SVG is
> animating? I do not see any of them.

Yes I do, see the video I attached.
Comment 4 Alexey Proskuryakov 2021-03-17 11:22:05 PDT 
I can reproduce this too (macOS 11.3 beta on Apple Silicon).
Comment 5 Radar WebKit Bug Importer 2021-03-23 09:47:33 PDT 
<rdar://problem/75741733>
Comment 6 Antoine Quint 2021-04-26 05:24:26 PDT 
I am not seeing this with an iMac Pro (2017) or a MacBook Pro (15-inch, 2018). I wonder if this could be specific to M1 Macs.
Comment 7 Antoine Quint 2021-04-26 05:50:14 PDT 
I can reproduce this with an iPhone 12 mini and an iPad Air (2020).
Comment 8 Antti Koivisto 2021-04-26 05:55:04 PDT 
Reproes on my M1 MBP