Bug 199706 - SVG with filter and Animation results in pixelated SVG
Summary: SVG with filter and Animation results in pixelated SVG
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 12
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-07-11 04:23 PDT by Tom Bigelajzen
Modified: 2019-07-14 02:11 PDT (History)
5 users (show)

See Also:


Attachments
Safari compared to Chrome (81.88 KB, image/jpeg)
2019-07-11 04:23 PDT, Tom Bigelajzen
no flags Details
test case (1.51 KB, text/html)
2019-07-11 14:27 PDT, Said Abou-Hallawa
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Tom Bigelajzen 2019-07-11 04:23:51 PDT
Created attachment 373913 [details]
Safari compared to Chrome

When applying a scale (or rotateX/Y) transform on an SVG that was never visible on the current page (visibility: hidden or opacity:0) and contains a filter, 
Safari will render the SVG with the transformed size it had when emerging to visibility.

If the opacity and animation applied directly on the SVG, it will repaint at the end of the animation. 
If applied on a parent it will remain pixelated until something else on the page will trigger a repaint. 

Reproduces on Desktop and Mobile Safari
Works as expected on Chrome and Firefox


Codepen of the screenshot: 
https://codepen.io/tombigel/pen/NZJROW
Comment 1 Radar WebKit Bug Importer 2019-07-11 09:01:01 PDT
<rdar://problem/52954377>
Comment 2 Said Abou-Hallawa 2019-07-11 14:26:11 PDT
The bug happens when an SVG with a filter is scaled up. The SVG filter is drawn once with the small size and then it is scaled up. In the test case the size of the SVG is animated from 10% to 100% which means, the SVG will be scaled from 20 pixels to 200 pixels. If the animation started from 100% to 10% the pixelation will not happen.
Comment 3 Said Abou-Hallawa 2019-07-11 14:27:50 PDT
Created attachment 373952 [details]
test case
Comment 4 Tom Bigelajzen 2019-07-14 02:11:29 PDT
Approved on GNOME Web (epiphany-1:3.32.3-1.fc30.x86_64) on Linux too.