MacOS Big Sur下Electron多屏切换时vibrancy毛玻璃与透明效果异常

可能的非Electron原生缺陷的原因 #

• 配置项冲突：同时开启transparent: true和vibrancy属于不符合官方规范的写法，vibrancy效果本身已经实现了系统级的透明图层渲染，额外开启transparent会导致MacOS窗口渲染时图层优先级冲突，在跨屏切换、刷新率/色深不一致的场景下，就会出现原生圆角、阴影丢失的问题。
• 多屏渲染上下文切换异常：如果两块屏幕的缩放比例、刷新率、色深参数不一致，窗口跨屏移动时系统会重新计算渲染上下文，你使用的frame: false+titleBarStyle: 'hiddenInset'组合，会打断系统原生的圆角、阴影渲染逻辑，导致属性丢失。
• 页面样式与系统层不对齐：虽然你设置了页面全局overflow: hidden，但窗口跨屏重绘时，页面根节点没有和系统vibrancy层的圆角对齐，看起来就像原生圆角丢失了。

修复方案 #

1. 修正BrowserWindow配置 #

移除冲突的配置项，用全透明背景色代替transparent属性：

const win = new BrowserWindow({
    darkTheme: true,
    frame: false,
    vibrancy: 'fullscreen-ui',
    titleBarStyle: 'hiddenInset',
    backgroundColor: '#00000000', // 全透明背景，完全交给vibrancy层渲染
    width: 1024,
    height: 768,
    minWidth: 640,
    minHeight: 480
})

注意：roundedCorners和transparent配置需要完全删除，hiddenInset在MacOS下自带原生圆角，不需要额外声明，避免冲突。

2. 优化页面样式 #

给页面根节点添加和系统原生一致的圆角，避免重绘时边缘透出：

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    min-width: 100%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 8px; // 和MacOS原生窗口圆角保持一致
    background: transparent;
}

3. 添加强制重绘逻辑 #

在主进程中监听窗口移动和屏幕参数变化事件，主动触发vibrancy层重绘：

const { screen } = require('electron')

// 监听窗口移动事件，重新设置vibrancy触发重绘
win.on('move', () => {
    if (!win.isDestroyed()) {
        win.setVibrancy('fullscreen-ui')
    }
})

// 监听屏幕参数变化事件，适配多屏切换场景
screen.on('display-metrics-changed', () => {
    if (win && !win.isDestroyed()) {
        win.setVibrancy('fullscreen-ui')
    }
})

内容的提问来源于stack exchange，提问作者Matthew Layton