[Bug]: Windows with vibrancy have a white background instead of being see-through

[leolabs]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Electron Version

14.0.0

What operating system are you using?

macOS

Operating System Version

macOS Big Sur 11.6

What arch are you using?

x64

Last Known Working Electron version

13.5.2

Expected Behavior

When I set the vibrancy option on a new BrowserWindow (e.g. to "popover"), the window's background should reflect this.

Actual Behavior

The window's background stays white. Adding transparent: true to the options makes the background work as expected but removes the title bar.

Testcase Gist URL

https://gist.github.com/bbc333443f77ce4a6061d43eddf67fd4

Additional Information

This might be related to #30993

[dehydratedpotato]

@leolabs Is this happening with all vibrancy options? For example, if you try appearance-ui? I see in your test case, you are using the vibrancy typewindow, which is a type of vibrancy that seems to act as a system-theme based solid color with desktop tinting capabilities, but it does not enable translucency.

(Who knows about Swift or ObjC, but aleast in ElectronJS, that’s how window works…)

I think window may actually be the shortened name for this NSVisualEffectView Material

[leolabs]

Yes, I've checked it with other values as well and it doesn't work with any of them. If you run the fiddle on Electron <= 13 then the option works as expected.

[dehydratedpotato]

@leolabs hmm strange hopefully some devs can get on this soon then

[craftzdog]

Same on electron@15.2.0

[codebytere]

cc @samuelmaddock this broke between 14.0.0 and 14.0.1 and cffc1a2 seems likely

[samuelmaddock]

I'm currently without a mac for a few weeks so I won't be able to provide changes for now.

I think a fix for this in 15.x.y and up would be to add a condition for vibrancy to set the WebContents background to transparent here:

electron/shell/browser/api/electron_api_browser_window.cc

Lines 40 to 50 in a2d993c

	// Copy the backgroundColor to webContents.
	v8::Local<v8::Value> value;
	bool transparent = false;
	if (options.Get(options::kBackgroundColor, &value)) {
	web_preferences.SetHidden(options::kBackgroundColor, value);
	} else if (options.Get(options::kTransparent, &transparent) && transparent) {
	// If the BrowserWindow is transparent, also propagate transparency to the
	// WebContents unless a separate backgroundColor has been set.
	web_preferences.SetHidden(options::kBackgroundColor,
	ToRGBAHex(SK_ColorTRANSPARENT));
	}

Transparency in 14.x.y is implemented slightly differently due to changes with WebPreferences (#30777). I think we could align its logic to what's referenced in the code above.

cc @samuelmaddock this broke between 14.0.0 and 14.0.1 and cffc1a2 seems likely

In 14.0.0, the background color of a WebContents was always set to transparent due to a bug after a Chromium upgrade iirc.

[leolabs]

I don't have any experience building Electron from source, but if there's anything I can do to help, please let me know :)