WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
NEW
199706
SVG with filter and Animation results in pixelated SVG
https://bugs.webkit.org/show_bug.cgi?id=199706
Summary
SVG with filter and Animation results in pixelated SVG
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.
Top of Page
Format For Printing
XML
Clone This Bug