gpui macOS: blurry background broken shadow

[Congyuwang]

Check for existing issues

• Completed

Describe the bug / provide steps to reproduce it

On macOS, when the window background is set to blurry, sometimes the shadow flashes, and the shadow can appear only partially, which looks broken:

Environment

Zed: v0.133.2 (Zed Preview)
OS: macOS 14.4.1
Memory: 16 GiB
Architecture: aarch64

If applicable, add mockups / screenshots to help explain present your vision of the feature

No response

If applicable, attach your ~/Library/Logs/Zed/Zed.log file to this issue.

No response

[Congyuwang]

Also has weird thumbnail rendering when swiped up to show all desktops:

• ghost rectangles on top left:
  

• sometimes no ghost, but it should look blurry. It looks transparent instead (as compared to Safari on the left).
  

[jansol]

The ghosts look exactly like ghost text that sometimes appears on transparent windows... Which turns out to be that the non-transparent parts of the window are actually holes in the shadow and the shadow does not get updated unless manually triggered or the window resizes. However updating the shadows on every frame was found in Alacritty to be very slow, so the next best workaround is to disable shadows entirely.

I can repro the non-blurred transparent thumbnail window on macOS 12.7.4 as well. I guess just add it to the list of known problems with CGSSetWindowBackgroundBlurRadius for now.

[Congyuwang]

Hi, @jansol, thanks for your reply. I've tried NSVisualEffectView in an empty Xcode Project (not yet in Zed). It certainly can be set as light so as not to follow system appearance:

2024-04-26.17.20.50.mov

I'm not very familiar with Mac app development though. Do you think this might work for blurry background case, or is there still some problems? (i.e., set background to this Appearance: Vibrant Light + Material: Under Window Background, and above which applies Zed themes with their different color tints)?

I'm willing to spend some more time figuring out how to put it into Zed (no idea how to do that just yet), if it could in theory work.

[jansol]

Vibrant Light adds a 80% opaque white layer which is the problem I mentioned earlier. (And Vibrant Dark adds a similar black one, both are a problem for themes)

For themes to look consistent, we need to make that "backdrop" layer completely transparent (or remove it), since Zed draws its own backdrop on top of the transparent background.

[Congyuwang]

Perhaps the problem isn't about CGSSetWindowBackgroundBlurRadius. After removing its usage completely, the ghost shape and broken shadow still appear in transparent background.

On the other hand, macOS Terminal App doesn't have any ghost image or shadow problem, although it also uses CGSSetWindowBackgroundBlurRadius.

[jansol]

Yes, the problems are not directly related to CGSSetWindowBackgroundBlurRadius but to the window shadow, which is why I opened this PR to disable shadows until someone figures out a better solution.

[Congyuwang]

Related issue in Alacritty: alacritty/alacritty#6229

[github-actions]

Hi there! 👋
We're working to clean up our issue tracker by closing older issues that might not be relevant anymore. If you are able to reproduce this issue in the latest version of Zed, please let us know by commenting on this issue, and we will keep it open. If you can't reproduce it, feel free to close the issue yourself. Otherwise, we'll close it in 7 days.
Thanks for your help!

[hfjallemark]

I can still reproduce it in Zed Preview 0.159.2.

[Aaron-212]

I wonder if it is possible to use NSVisualEffectView rather than calling private APIs?

[Congyuwang]

Vibrant Light adds a 80% opaque white layer which is the problem I mentioned earlier. (And Vibrant Dark adds a similar black one, both are a problem for themes)

For themes to look consistent, we need to make that "backdrop" layer completely transparent (or remove it), since Zed draws its own backdrop on top of the transparent background.

I think NSVisualEffectView is worth trying. Although as Jansol mentioned, NSVisualEffect not only does blurriness, but also applies opaqueness and white / dark color to it.

I am of the opinion that themes for blurry background should be specialized for blurry background, and should adapt to NSVisualEffect’s opaqueness (build on top of that).

If a theme is designed not for blurry background, then don’t use it with blurry background.

Now I never use blurry backgrounds because of the lack of window shadow.

But clearly now there are conflicting views on this issue.