L'SVG in linea scompare in iOS e Safari quando viene applicato un filtro CSS

La situazione è che ho un SVG incorporato generato da Grunticon e inserito nel DOM. È bianco su uno sfondo grigio con un'ombra.L'SVG in linea scompare in iOS e Safari quando viene applicato un filtro CSS

ho usato il seguente CSS per l'ombra:

svg { 
    -webkit-filter: drop-shadow(1px 1px 0 #141414); 
    filter: drop-shadow(1px 1px 0 #141414); 
}

Questo funziona bene in Chrome, Opera, Firefox e tutto il resto che ho provato, tranne Safari su iOS e desktop. Il filtro CSS fa sparire l'SVG.

Non è solo il filtro drop-shadow, qualsiasi filtro sembra avere questo effetto.

questo può essere lavorato intorno a farlo funzionare in Safari?

Sì, ma qual è la tua domanda qui? –

Come farlo non scomparire! Aggiornerà il q per chiarimenti :) –

Rimuovilo quando safari è l'UA. per esempio. http://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome –

Annoying che questo non funziona, ma Safari è il nuovo IE dopo tutto! : P

Una soluzione è avvolgere l'SVG in un altro elemento e applicare il filtro a tale elemento.

2016-04-06 10:17:30

non ci avrei pensato, grazie. è pazzesco che tu debba fare questo ... –

C'è un bug aperto per questo comportamento in Safari? Mi chiedo quando sarà affrontato. – zevnicsca

Sembra risolto in Safari Technology Preview quindi non ci resta che attendere un po ' –

risposta