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

Question

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

我在上一个项目中使用了 vibrancy，在同一台机器上使用了以前的 electron 版本，它们工作正常，但我知道它不起作用，我不知道问题出在哪里。

我 google 它但我没有发现任何问题或 github 问题。

可能是electron的问题？！！

这里有一些可能需要的信息：

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

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

// 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>

Project Structure:

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

这是全部信息。

Answer 1

问题出在浏览器窗口选项

这是在 macOS 上启用 under-window 活力的正确选项形式：

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

更多信息：Electron BrowserWindow Options

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

Why Electron Vibrancy Effect Not Working At All

javascript

macos

node.js

uivibrancyeffect

electron