为什么电子振动效应根本不起作用答案

【问题标题】：Why Electron Vibrancy Effect Not Working At All为什么电子振动效应根本不起作用
【发布时间】：2021-11-20 03:16:27
【问题描述】：

这个问题很混乱，因为我不知道问题出在哪里。

我在上一个项目中使用了 vibrancy，之前的电子版本在同一台机器上运行正常，但知道它不起作用，我不知道是什么问题。

我用谷歌搜索，没有发现任何问题或 github 问题。

问题可能出在电子上？！！

这里可能需要一些信息：

系统：
- MacOS 11.6
- 英特尔芯片
电子版：15.0.0
其他依赖或 DevDependencies：无

这是一个非常简单的例子，并没有发生什么疯狂的事情。非常非常简单：

// File: index.js
// Process: Main
// Location: Root Directory Of Project
// -----------------------------------
const { app, BrowserWindow } = require('electron');
const { join } = require('path');

const isDarwin = process.platform === 'darwin';
let mainWindow;

app.setName('Electron Sample');

const Ready = () => {
  mainWindow = new BrowserWindow({
    show: false,
    vibrancy: 'content',
    visualEffectState: 'followWindow',
    title: app.getName(),
    backgroundColor: false,
    webPreferences: {
      contextIsolation: false,
      nodeIntegration: true,
      nativeWindowOpen: false
    }
  });

  mainWindow.loadFile(join(__dirname, './index.html'));

  mainWindow
    .once('ready-to-show', () => mainWindow.show())
    .once('close', () => (mainWindow = null));
};

app.whenReady().then(Ready);

app.on('window-all-closed', () => {
  if (!isDarwin) app.quit();
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) Ready();
});

<!--
 File: index.html
 Process: Renderer
 Location: Root Directory Of Project
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html,
      body {
        background-color: transparent;
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <h1>I Confused! ????</h1>
  </body>
</html>

项目结构：

node_modules
index.js
index.html
yarn.lock
package.json

这是所有信息。

【问题讨论】：

标签： javascript node.js macos electron uivibrancyeffect

【解决方案1】：

问题出在 BrowserWindow 选项中

这是在 macOS 上启用窗口下活力的正确选项形式：

new BrowserWindow({
 // Other Options...
 transparency: true,
 backgroundColor: "#00000000" // transparent hexadecimal or anything with transparency,
 vibrancy: "under-window" // in my case...
})

【讨论】：