いくつかの状況でSafariでSVGフィルタが曖昧になる

Question

SVGフィルタの影響を受けるすべてがファジーになるSafari以外のすべてのブラウザ（Firefox、Chrome、さらにはIE/Edge）上で正常に表示されるインタラクティブSVGを持つページがありますmush（双線形補間を使ってスケールアップされた低解像度のキャンバスにレンダリングされたもののように見えます）。今ここで

問題も表示される小さなテスト・ケース：

<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>

はそれが（OS X 10.13上）アップルのSafari 11にどのように見えるか：

それをGoogle ChromeとMozilla Firefoxとそれぞれ比較してください：

other SVG filter demo pages on the webを見ると、明らかに効果はありませんが。正確に何が原因かわかりません。私が気づいたのは、フィルタの領域が大きくなるほど（width/heightの属性が<filter>で制御される）問題がより顕著になることです。

これは既知の問題ですか？それはどのような状況下で起こるのですか？合理的な回避策は何ですか？

Answer 1

これはバグではありません。 Safariがあなたのフィルターの宣言に間違った構文のためにあなたを罰するされます。

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

仕様によると、これは高さ=「30000パーセント」と幅=「30000パーセント」として読まれるべきです。 Safariは、 "あなたがこれを意味していたと思います"と言って、フィルタの解像度を自動的に調整して、この非常に大きなバッファに膨大なメモリを割り当てないようにします。

300％を意味する場合は、300％を入れる必要があります。これは、1つの修正です：

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

あなたが300ピクセル（実際にユーザ空間単位）を意味している場合 - 、これは別の修正です：

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

明示的UserSpaceOnUseでを指定することにより、あなたはピクセルを意味することをサファリを伝える必要があります（それ以外の場合サイレントデフォルトオブジェクトを使用します.BoundingBox）

もう1つの修正点は、明示的にfilterResを指定してSafariのフィルタ解像度調整をオーバーライドすることです。 filterResは新しいFilters 1.0仕様で廃止され、最新のChrome & Firefoxから削除されましたが、Safariでもサポートされています。これは大きなメモリヒットにつながります（あなたが行ったようにフィルタのサイズを決めるとは信じがたく） - これはお勧めできません。しかし、何でも - 完全性のために。

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

（他の二つのマイナーノート - 。あなたは自動閉鎖要素を使用して、フィルターがあまり長ったらしいすることができますそして、あなたがやっているぼかしの調整はぼかしを明るくしない、それだけで不透明FWIWにダイヤルアップ。 ）