SVG-Filter in Safari unter bestimmten Umständen unscharf

Question

Ich habe eine Seite mit einem interaktiven SVG, die in allen Browsern (Firefox, Chrome, sogar IE/Edge) gut aussieht, außer Safari, wo alles von einem der SVG-Filter beeinflusst wird Brei (sieht aus wie etwas, das auf eine Leinwand mit niedriger Auflösung gerendert wurde, die mit bilinearer Interpolation skaliert wurde).

Hier nun ein kleiner Testfall, wo das Problem auch erscheint:

<svg> 
 
    <defs> 
 
    <filter id="filter" y="-100" x="-100" height="300" width="300"> 
 
     <feGaussianBlur in="SourceAlpha" stdDeviation="3.5"></feGaussianBlur> 
 
     <feColorMatrix type="matrix" values="0 0 0 2 0 0 0 0 2 0 0 0 0 0 0 0 0 0 1 0" result="lightenedBlur"></feColorMatrix> 
 
     <feMerge> 
 
     <feMergeNode in="lightenedBlur"></feMergeNode> 
 
     <feMergeNode in="SourceGraphic"></feMergeNode> 
 
     </feMerge> 
 
    </filter> 
 
    </defs> 
 
    <g> 
 
    <rect x="10" y="10" width="100" height="100" fill="blue" filter="url(#filter)"></rect> 
 
    </g> 
 
</svg>

Wie sieht es auf Apple Safari 11 (auf OS X 10.13):

Vergleichen Sie das mit Google Chrome bzw. Mozilla Firefox:

Bei der Betrachtung other SVG filter demo pages on the web obwohl der Effekt offenbar nicht da ist. Nicht ganz sicher, was genau das verursacht. Was mir aufgefallen ist, dass das Problem umso deutlicher wird, je größer die Filterfläche ist (gesteuert durch die /height Attribute von <filter>).

Ist dies ein bekanntes Problem? Unter welchen Umständen tritt es auf? Was sind angemessene Problemumgehungen?

Answer 1

Dies ist kein Fehler. Safari ist zu bestrafen Sie für falsche Syntax in Ihrer Filterdeklaration:

<filter id="filter" y="-100" x="-100" height="300" width="300"> 

Nach spec, sollten diese als Höhe gelesen werden = "30000%" und width = "30000%". Safari sagt "ok ich nehme an, du meintest das" und passt die Filterauflösung automatisch an, so dass es diesem sehr großen Pufferspeicher kein riesiges Stück Speicher zuweist -> daher beschissene Auflösung.

Wenn Sie 300% gemeint sind - dann müssen Sie 300% setzen. Dies ist ein fix:

<filter id="filter" y="-100%" x="-100%" height="300%" width="300%"> 

Wenn Sie 300px gemeint (wirklich Userspace-Einheiten) - dann ist dies ein weiterer fix:

<filter id="filter" y="100" x="-100" height="300" width="300" filterUnits="userSpaceOnUse"> 

Sie müssen Safari ausdrücklich sagen, dass Sie Pixel bedeuten, durch die Angabe userSpaceOnUse (andernfalls verwendet den stillen Standardwert objectBoundingBox)

Ein weiterer Fix - ist die Filterauflösung von Safari durch explizite Angabe eines filterRes zu umgehen. filterRes wurde in der neuen Filterspezifikation 1.0 veraltet und bereits vom neuesten Chrome & Firefox entfernt, Safari wird jedoch weiterhin unterstützt. Da dies zu einem großen Speicherverlust führt (und es ist schwer zu glauben, dass Sie Ihren Filter wie gewohnt skalieren wollten), wird dies nicht empfohlen. Aber was auch immer - zur Vollständigkeit.

<filter id="filter" y="-100" x="-100" height="300" width="300" filterRes="100000"> 

(Zwei weitere kleinere Notizen - Sie können Ihre Filter weniger wortreich durch selbstschließ Elemente machen und die Unschärfe Einstellung Sie tun die Unschärfe nicht aufhellen, sie wählt nur die Opazität FWIW up..)