CSS issue with Bubble

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 :

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 :


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

Thanks for your help !

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…

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

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

1 Like

This topic was automatically closed after 69 days. New replies are no longer allowed.