title: Why are non-SVG elements with a "url()" SVG filter applied appearing glitchy in Safari?
body: <p>I am trying to apply an feDisplacementMap in an SVG to images (the problem also persists on any DOM elements). It works exactly as expected in Chrome but turning up very strange and unpredictable results in Safari. </p>
  
  <p>I tried moving the image as a linked element inside an SVG and using filter="url(#example)" instead of defining it in the CSS and that works as expected in Safari (and Chrome). I could not find anything regarding Safari not supporting filter: url(#example) anywhere and from all I can gather, it should work the same as it does in Chrome.</p>
  
  <p>Here's a fiddle with the two versions: <a href="https://jsfiddle.net/85bnkLwt/" rel="nofollow noreferrer">https://jsfiddle.net/85bnkLwt/</a></p>
  
  <p>First version (which works in Chrome and seems like it should work in Safari):</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" style="display: none;"&gt;
    &lt;defs&gt;
      &lt;filter id="filter-warp" x="-50%" y="-50%" width="200%" height="200%"&gt;
        &lt;feTurbulence type="fractalNoise" baseFrequency="0.008" result="displacement-map" numOctaves="2" seed="1"&gt;&lt;/feTurbulence&gt;
        &lt;feDisplacementMap in="SourceGraphic" in2="displacement-map" scale="100" xChannelSelector="R" yChannelSelector="G"&gt;&lt;/feDisplacementMap&gt;
      &lt;/filter&gt;
    &lt;/defs&gt;
  &lt;/svg&gt;
  
  &lt;div class="image-wrap" style="filter: url(#filter-warp);"&gt;
    &lt;img width="600" height="500" src="https://picsum.photos/600/500" alt="" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Second version (which works in Chrome and Safari):</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 500"&gt;
    &lt;defs&gt;
      &lt;filter id="filter-warp-2" x="-50%" y="-50%" width="200%" height="200%"&gt;
        &lt;feTurbulence type="fractalNoise" baseFrequency="0.008" result="displacement-map" numOctaves="2" seed="1"&gt;&lt;/feTurbulence&gt;
        &lt;feDisplacementMap in="SourceGraphic" in2="displacement-map" scale="100" xChannelSelector="R" yChannelSelector="G"&gt;&lt;/feDisplacementMap&gt;
      &lt;/filter&gt;
    &lt;/defs&gt;
    &lt;image x="0" y="0" width="100%" height="100%" xlink:href="https://picsum.photos/600/500" alt="" filter="url(#filter-warp-2)"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>For me (Mac, Chrome Version 75 and Safari Version 11.1.2) the two images look very similar in Chrome (as expected) and in Safari, the image outside the SVG with the filter applied is totally glitched out. It seems like they should both work the same and I am unable to find any resources or documentation that says why the CSS filter would not work in Safari. All other filters work as expected.</p>
  
  <p>Any input would be greatly appreciated. Thank you!</p>