Find a way to support corner radius on blurred views inside popovers

[maximkrouk]

I tried to play with layer, corner & image masks, clipsToBounds property, container views, but couldn't find a way to achieve the desired behavior. Maybe together we can find how to make it work 🙂

Upd: everything works fine in default windows, but blur-in-blur doesn't work.

let visualEffectView = NSVisualEffectView(frame: NSMakeRect(100, 100, 300, 300))
visualEffectView.material = .dark
visualEffectView.blendingMode = .behindWindow
visualEffectView.wantsLayer = true
visualEffectView.layer?.cornerRadius = 15.0
self.view.addSubview(visualEffectView)

let visualEffectView2 = NSVisualEffectView(frame: NSMakeRect(100, 100, 100, 100))
visualEffectView2.material = .light
visualEffectView2.blendingMode = .behindWindow
visualEffectView2.wantsLayer = true
visualEffectView2.layer?.cornerRadius = 15.0
visualEffectView.addSubview(visualEffectView2)

[maximkrouk]

Here are workarounds I found, but none of them can be applied to VisualEffectBlur directly:

0. Default behaviour:

   

1. Insert non-blurring NSVisualEffectView (with .headerView material for example) under the blurred one. But it should cover all the background or you'll get the second picture.

   

2. Play with opacity and different non-blurring materials (it may be hard to notice, but they actually blur the background if their opacity is low and corner radius works fine too). But blurred materials will start to render with no corners masked 😢 as U can see at the second pic.

   

3. Use separate windows (here you can find some great examples of window styles)