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
<rdar://problem/52954377>
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.
Created attachment 373952 [details] test case
Approved on GNOME Web (epiphany-1:3.32.3-1.fc30.x86_64) on Linux too.