0

I was trying to use CSS with backdrop-filters: -webkit-backdrop-filter: url(#filter-58605); backdrop-filter: url(#filter-58605);

And I can't figure out why they do not work on Mac Safari, IOS Safari/Chrome. While works great on Windows Chrome.

Here is the example which works well in Windows Chrome, but doesn't in Mac and IOS.

https://codepen.io/vanyadoing/pen/YzRbZEQ

Is there a workaround to make it happens for Mac and IOS?

Thank you.

Here is the code:

CSS:

#comp{
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  height: -webkit-fill-available;
}
.JaFkIvzO{
  -webkit-backdrop-filter: url(#filter-58605);
  backdrop-filter: url(#filter-58605);
}

HTML:

<img id="image" src="https://static.wixstatic.com/media/a2998c_d84c2089a1444b919e4cf367dfeb6420~mv2.jpg" style="width: 100%; height: 100%; object-fit: cover;">

<div id="comp">
<glass-element id="el">
<svg id="svgfilters" aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs id="defs">
<filter id="filter-58605" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feColorMatrix type="matrix" values=".33 .33 .33 0 0
            .33 .33 .33 0 0
            .33 .33 .33 0 0
            0 0 0 1 0" in="SourceGraphic" result="colormatrix"></feColorMatrix>
        <feComponentTransfer in="colormatrix" result="componentTransfer">
            <feFuncR type="table" tableValues="0.03 1"></feFuncR>
            <feFuncG type="table" tableValues="0.57 1"></feFuncG>
            <feFuncB type="table" tableValues="0.49 1"></feFuncB>
            <feFuncA type="table" tableValues="0 1"></feFuncA>
        </feComponentTransfer>
        <feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend">
</feBlend>
    </filter>
</defs>
</svg>

<div class="JaFkIvzO" style="position: absolute; height: 100%; width: 100%;"></div>
</glass-element>
</div>
Arnobi
  • 1
  • 2

0 Answers0