I’ve an angled gradient svg form that breaks up into items on Safari IOS. It appears to be as a result of safari IOS does not assist feColorMatrix (and many others).
Has anybody else handled it earlier than and might suggest a fallback that might be applied?
What it seems like in different Browsers: https://ibb.co/BKjsjkq
What it seems like in Safari IOS: https://ibb.co/QFVptYn
Code right here: https://codepen.io/dasha-reverie-designs/pen/RwMjQrX
Respect any help.
<div class="customized"></div>
<svg type="visibility: hidden; place: absolute;" width="0" peak="0" xmlns="http://www.w3.org/2000/svg" model="1.1">
<defs>
<filter id="spherical">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" end result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 1 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" end result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
.customized{
show:inline-block;
width:150px;
shade:purple;
margin:20px;
filter:url(#spherical);
}
.customized::earlier than {
content material:"";
show:block;
padding-top:106%;
background: clear linear-gradient(180deg, #1B1743 0%, #25205C 50%, #2C266B 100%) 0% 0% no-repeat padding-box;
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 88%);
}