CSS issue with Bubble

[ben4trader]

Hello everyone.

I’m facing a CSS issue with custom code. I added a glass card design (with blur) and everything works fine while browsing the website on Android phones, but not on iOS phones.

The blur effect just doesn’t do anything on iOS.

Here is the code :

#glass3{
position: relative;
z-index: 1;
text-align: left;
border-radius: 5px;
background: rgb(255 255 255 / 2%);
backdrop-filter: blur(3px);
padding: 30px 30px 30px 30px;
overflow: hidden;
border-color: rgb(255 255 255 / 10%);
}

The website link :

https://4kin.bubbleapps.io/version-test/top_menu_test?p=Staking

So how can it be working on Android but not iPhone ?

Thanks for your help !

[viquarahmed07]

Hi @ben4trader
I think you need to add contrast to backdrop filter to get it work on ios.

Here is the link i find out on how to fix…

Does Backdrop-Filter not work on Chrome IOS?

[ben4trader]

Thank you a lot, will give it a shot when I can grab an iPhone Will let you know!!!

[chaostorm]

@ben4trader Add -webkit-backdrop-filter: blur(3px); to the CSS style and you should be fine.