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%);
}

By admin

Leave a Reply

Your email address will not be published.