Bug 199706

Summary: SVG with filter and Animation results in pixelated SVG
Product: WebKit Reporter: Tom Bigelajzen <tombigel>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, maggotfish, sabouhallawa, simon.fraser, webkit-bug-importer, zimmermann
Priority: P2 Keywords: InRadar
Version: Safari 12   
Hardware: All   
OS: All   
See Also: https://bugs.webkit.org/show_bug.cgi?id=27684
Attachments:
Description Flags
Safari compared to Chrome
none
test case none

Tom Bigelajzen
Reported 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
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
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2019-07-11 09:01:01 PDT
<rdar://problem/52954377>
Said Abou-Hallawa
Comment 2 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.
Said Abou-Hallawa
Comment 3 2019-07-11 14:27:50 PDT
Created attachment 373952 [details] test case
Tom Bigelajzen
Comment 4 2019-07-14 02:11:29 PDT
Approved on GNOME Web (epiphany-1:3.32.3-1.fc30.x86_64) on Linux too.
Ahmad Saleem
Comment 5 2023-05-04 00:38:47 PDT
(In reply to Tom Bigelajzen from comment #0) > 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 Filter+Parent is still blurry in STP169 while it is not in Chrome Canary 115 and Firefox Nightly 114.
Simon Fraser (smfr)
Comment 6 2025-02-25 08:44:14 PST
This is essentially the same issue as bug 27684.
Simon Fraser (smfr)
Comment 7 2025-02-25 08:49:49 PST
One workaround here is to specify the keyframes like: @keyframes expand-in { from { opacity: 0; transform: scale(1); } 0.1% { opacity: 0; transform: scale(0.1); } to { opacity: 1; transform: scale(1); } }
Note You need to log in before you can comment on or make changes to this bug.