I'm trying to mimic glossy, semi-transparent blurry backgrounds for my visionOS app inside of WKWebView
It's easy to do for menus like on the screenshot below, using semitransparent background and applying backdrop-effect: blur(20px)
The problem I have is when I make the whole window like this by specifying webView.isOpaque = false and applying to body background-color: transparent. In this case, suddenly, the backdrop-effect: blur stops working for menu. See picture below:
You can clearly see that blur is not working anymore since you can see 3 dots behind the menu. I did not touch any CSS properties for the menu itself, only making the whole window semi-transparent.
Is there any workaround for this problem? For me it's a blocker to make UI to feel native to visionOS.
SilverBullet
Users receive reputation points by contributing quality content to the forums.
Posts include post and replies published on the forums.
Post authors can mark replies as Accepted to indicate successful solutions.
Apple Developer Forums admins can mark replies as Apple Recommended to indicate an approved solution
Last seen