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 01:07 AM

Reply
Question marked as Top-ranking reply

Posted on Sep 19, 2024 07: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

3 replies

This thread has been closed by the system or the community team. You may vote for any posts you find helpful, or search the Community for additional answers.

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.