Perché il filtro (drop-shadow) causa la scomparsa del mio SVG in Safari?

Question

Sto sviluppando un'applicazione utilizzando D3.js. Sono stato sviato per un po 'e di recente ci sono tornato. Oggi ho scoperto che, sebbene funzionasse bene in passato, la mappa SVG nell'app non viene più visualizzata su Safari mobile (iOS 9.3.1) o desktop Safari (v9.1 (11601.5.17.1)).

Ho estratto SVG e una singola regola di stile e li ho inseriti su CodePen per illustrare cosa succede. In Chrome, questa penna apparirà bene. In Safari, sarà completamente vuoto.

https://codepen.io/Kirkman/pen/pyKzeX

Se ispezionare il DOM in Safari, si scopre che i percorsi ci sono, e sono le forme giuste. Sembrano semplicemente invisibili. Deselezionando le regole di stile nella finestra di ispezione provoca l'intera mappa di apparire magicamente (senza l'ombra, ovviamente)

La regola di stile è molto semplice:

svg { 
    -webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,.4)); 
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,.4)); 
} 

Qualcuno può suggerire il motivo per cui questo non sta funzionando? Ho fatto qualcosa di sbagliato o qualcosa è cambiato in Safari?

Answer 1

Probabilmente è un po 'in ritardo, ma nel caso in cui vi lascerò la mia risposta. Ho avuto lo stesso problema con Safari e ho capito che questo sembra essere un problema/bug di Safari. Puoi aggirare questo bug semplicemente avvolgendo il tuo tag SVG con un altro tag HTML come un div e applicando a questo elemento il filtro drop-shadow come hai fatto nel tuo esempio. Qui avete il vostro esempio modificato con l'elemento di involucro

https://codepen.io/mauromjg/pen/rLaqWG

<div class="svg-wrapper"> 
    <svg>...</svg> 
</div> 

//CSS 
.svg-wrapper { 
    -webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,.4)); 
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,.4)); 
} 

Speranza che aiuta!

Answer 2

I browser calcolano le cose in modo diverso e per qualche motivo Safari ti odia. Lol.

Tuttavia, dovresti utilizzare i filtri SVG. Sono molto più affidabili.

SOURCE - w3schools

<svg height="140" width="140"> 
    <defs> 
    <filter id="f3" x="0" y="0" width="200%" height="200%"> 
     <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" /> 
     <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> 
     <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> 
    </filter> 
    </defs> 
    <rect width="90" height="90" stroke="green" stroke-width="3" 
    fill="yellow" filter="url(#f3)" /> 
</svg> 

Speranza che aiuta!

Answer 3

Nel mio caso, stavo usando un filtro SVG, quindi non ho potuto realmente applicare la soluzione CSS. Invece, sono riuscito a far comparire l'SVG applicando una trasformazione CSS tramite Javascript dopo il caricamento della pagina. Ecco un esempio in JS pianura:

setTimeout(function(){ 
document.getElementById("svg-element").style.display = "block"; 
},10); 

Se volete sapere se questo funzionerà, vedere se lo SVG si presenta dopo aver ridimensionato il browser o modificare una regola di stile CSS utilizzando la finestra di ispezione.