SVG nội tuyến biến mất trong iOS và Safari khi bộ lọc CSS được áp dụng

Question

Tình huống là tôi có SVG nội tuyến được tạo bởi Grunticon và được chèn vào DOM. Nó có màu trắng trên nền xám với một bóng đổ.

tôi đã sử dụng CSS sau cho bóng:

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

này hoạt động tốt trong Chrome, Opera, Firefox và ở khắp mọi nơi khác tôi đã thử nghiệm nó, ngoại trừ Safari trên iOS và máy tính để bàn. Bộ lọc CSS làm cho SVG biến mất.

Nó không chỉ là bộ lọc drop-shadow, bất kỳ bộ lọc nào dường như có hiệu ứng này.

Một bản demo là trên Codepen tại http://codepen.io/derekjohnson/pen/MyOaRY

này có thể được làm việc tròn để làm cho nó làm việc trong Safari?

Answer 1

Làm phiền điều này không hiệu quả, nhưng Safari là trình duyệt IE mới sau tất cả! : P

Giải pháp thay thế là bao bọc SVG trong phần tử khác và áp dụng bộ lọc cho phần tử đó.