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.