Bug 199706 – SVG with filter and Animation results in pixelated SVG

• Status: NEW
• Component: SVG

[Tom Bigelajzen]

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

[Radar WebKit Bug Importer]

<rdar://problem/52954377>

[Said Abou-Hallawa]

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]

Created attachment 373952 [details]
test case

[Tom Bigelajzen]

Approved on GNOME Web (epiphany-1:3.32.3-1.fc30.x86_64) on Linux too.

[Ahmad Saleem]

(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)]

This is essentially the same issue as bug 27684.

[Simon Fraser (smfr)]

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);
  }
}