<html>
    <head>
      <base href="https://bugs.webkit.org/">
    </head>
    <body><table border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>Bug ID</th>
          <td><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - SVG with filter and Animation results in pixelated SVG"
   href="https://bugs.webkit.org/show_bug.cgi?id=199706">199706</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>SVG with filter and Animation results in pixelated SVG
          </td>
        </tr>

        <tr>
          <th>Product</th>
          <td>WebKit
          </td>
        </tr>

        <tr>
          <th>Version</th>
          <td>Safari 12
          </td>
        </tr>

        <tr>
          <th>Hardware</th>
          <td>Macintosh
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>macOS 10.14
          </td>
        </tr>

        <tr>
          <th>Status</th>
          <td>NEW
          </td>
        </tr>

        <tr>
          <th>Severity</th>
          <td>Normal
          </td>
        </tr>

        <tr>
          <th>Priority</th>
          <td>P2
          </td>
        </tr>

        <tr>
          <th>Component</th>
          <td>SVG
          </td>
        </tr>

        <tr>
          <th>Assignee</th>
          <td>webkit-unassigned@lists.webkit.org
          </td>
        </tr>

        <tr>
          <th>Reporter</th>
          <td>tombigel@wix.com
          </td>
        </tr>

        <tr>
          <th>CC</th>
          <td>zimmermann@kde.org
          </td>
        </tr></table>
      <p>
        <div>
        <pre>Created <span class=""><a href="attachment.cgi?id=373913" name="attach_373913" title="Safari compared to Chrome - https://codepen.io/tombigel/pen/NZJROW">attachment 373913</a> <a href="attachment.cgi?id=373913&action=edit" title="Safari compared to Chrome - https://codepen.io/tombigel/pen/NZJROW">[details]</a></span>
Safari compared to Chrome - <a href="https://codepen.io/tombigel/pen/NZJROW">https://codepen.io/tombigel/pen/NZJROW</a>

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: 
<a href="https://codepen.io/tombigel/pen/NZJROW">https://codepen.io/tombigel/pen/NZJROW</a></pre>
        </div>
      </p>


      <hr>
      <span>You are receiving this mail because:</span>

      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>