You can make a difference in the Apple Support Community!

When you sign up with your Apple Account, you can provide valuable feedback to other community members by upvoting helpful replies and User Tips.

background-color and backdrop-filter: blur() don't want to work together in Safari 18 on iphone

My <selection> contains css:


background-color: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(1px); /*For old safari versions*/
backdrop-filter: blur(1px);


and my <selection> block is full white, despite the fact that there is a color image in the background

but it safari 17 it work correctly. If I remove one thing from the code, either 'background-color' or 'backdrop-filter', then the block takes on a predictable form.


Is there a way to fix this? Or will have to wait until Apple fixes another problem in the Apple Web Kit?

iPhone 11

Posted on Sep 19, 2024 1:07 AM

Reply
Question marked as Top-ranking reply

Posted on Sep 19, 2024 7:02 AM

Ahh, I updated MacOS to Sequoia, and Safari 18 on macOS has the same bug, even though safari 18 on Sonoma didn't have the same bug

2 replies

background-color and backdrop-filter: blur() don't want to work together in Safari 18 on iphone

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple Account.