Bug 185074 - Animating SVG blur filter stdDeviation leaves artifacts
Summary: Animating SVG blur filter stdDeviation leaves artifacts
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 11
Hardware: Mac macOS 10.13
: P2 Normal
Assignee: Nobody
URL: https://jsfiddle.net/sxvtwhfo/show
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2018-04-27 07:24 PDT by bdc
Modified: 2023-06-19 03:39 PDT (History)
5 users (show)

See Also:

Attachments
Test case (2.55 KB, application/zip)
2018-04-27 07:24 PDT, bdc 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description bdc 2018-04-27 07:24:24 PDT 
Created attachment 338986 [details]
Test case

In order to simulate a motion blur, I'm animating the `stdDeviation` attribute of a `feGaussianBlur`. It works well on Firefox and Chrome, but Safari leaves artifacts behind the element as it moves (see test case attached).

It's worth noting promoting the element with `will-change:transform` removes the artifacts, but unfortunately also removes the gaussian blur outside the element.
Comment 1 bdc 2018-04-27 07:27:32 PDT 
FWIW it looks like a paint refresh issue. If you resize the browser during the animation, the issue sort of disappears.
Comment 2 Radar WebKit Bug Importer 2018-04-27 17:45:07 PDT 
<rdar://problem/39810603>
Comment 3 Radar WebKit Bug Importer 2018-04-27 17:45:27 PDT 
<rdar://problem/39810613>
Comment 4 Ahmad Saleem 2023-06-19 03:39:47 PDT 
It is still reproducible in STP172.

Added JSFiddle URL (easier to open and test) based on attached test case.