Electron: 透明窗口有白色背景窗口

这个一般和硬件有关，能不能在每台机器上打开chrome://gpu url，对比一下结果？

_图形功能状态_ - 在 mac、windows 虚拟化（通过并行）和 windows pc 中完全相同。
_Driver Bug Workarounds_ - 两台windows机器相同，mac不同
_Problems Detected_ - 两台windows机器相同，mac不同
_版本信息和驱动程序信息_ - 类似但会更改每台机器中的一些参数，如 GPU0、Sanboxed、驱动程序版本/供应商。

如果您愿意，我可以为您提供更准确的屏幕截图。

我认为这是Chrome渲染代码的错误，应该与GPU/硬件有关。 恐怕我们无法在 Electron 方面解决它。

好的，所以您的建议是等待 Chrome 的下一个版本？

我有更新，这很奇怪。

如您所知，在虚拟化 Windows 上一切正常，但在 pc 上，如果窗口至少为 _160x80 像素_，则透明选项有效。

在我的具体情况下，_100x50px_ 是我的窗口的标准尺寸，每次点击我自己的按钮时，我都会使用 _12x5px_ 增加尺寸

win.setSize(x, y);

回顾：
尺寸 < 160x80 像素：_白色背景_
尺寸 >= 160x80 像素：_透明背景_

我也可以在我的 Windows 7(x64) 机器上确认这一点。 当透明标志设置为真时。
正如@delvedor所说，因为，
尺寸 < 160x80px：白色背景
尺寸 >= 160x80px：透明背景

更新：
在确认这个问题时，我遇到了另一个可能相关的问题。 我在#2184 记录了它。

我最近也遇到了这个问题，我调整了高度和宽度来尝试看看会发生什么。 原来，如果宽度和高度值都小于160，你会看到白屏，即

159 x 159 = 白屏

但是，如果至少一个值 >= 160，那么它将是透明的，所以

160 x 1 = 透明
1 x 160 = 透明

我试图查看以编程方式重新调整浏览器窗口的大小是否会有所帮助，但它没有，尽管我确实看到它在窗口后面添加了白色背景。 如果你使用的背景是 rgba(0,0,0,0.2) 你会看到它会因为它后面的白色窗口而变色

这很可能与这个问题有关： https ://github.com/atom/electron/issues/861

我在最新的 Electron (v0.33.6) 和 Yosemite 上。 它完全适合我......我像这样实例化窗口：

        const window = new BrowserWindow({
                width,
                height,
                'node-integration': true,
                frame: false,
                transparent: true
        });

        window.loadUrl(`http://localhost:8002${uri}`);
        window.openDevTools();

我看到的唯一缺陷是当我打开开发工具时，背景是白色的，直到我关闭它，然后它才变得透明。

刚刚意识到这似乎是 Microsoft Windows 的问题

@KevinMartin是的，是的！

编辑：甜！ 在命令行中添加--enable-transparent-visuals --disable-gpu使它对我有用。 应该更仔细地阅读文档。

在Linux上也有这个问题。 我只是想用透明的 bg 做一个“Hello world”，看看它是否有效，但我得到的是白色背景。

这就是我所拥有的。
main.js
索引.html

我使用的是 64 位的基本操作系统 Freya。 这是一个运行 GTK3 的基于 Ubuntu 14.04 的发行版。

尝试chrome://gpu并检测到一些问题。

我在ubuntu linux上有同样的问题

此问题与硬件和驱动程序密切相关，我们无法在 Electron 方面解决此问题，因此我将关闭此问题，因为无法解决。 对于被这个问题困扰的人，我唯一能给出的建议是等待 Chrome 的升级，看看它是否能解决这个问题。

这个可以重开吗？ 我在 Cinnamon 桌面上遇到了独特的问题，Ubuntu 16.04 运行最新的 NVIDIA 驱动程序。

例子：

它应该是什么样子

编辑：这发生在 GNOME 和 Unity 桌面中。 这绝对应该修复。

你好，

我有同样的问题，有白色背景。
Windows 速成版 2008 R2
电子版：1.4.12

win = new BrowserWindow(
{ height: 161, width: 81, show: false, frame: false, transparent: true, resizable: false}
);

我几乎尝试了一切
任何的想法？？

如果我创建窗口，我可以让透明度工作，等待几秒钟让它呈现，然后稍微移动它。

@jfgilliam当您说“移动一点”时，您是什么意思？
改变窗口位置？

是的。 在不需要的地方创建窗口。 然后移动它。 关键是等到它呈现。

• 杰夫

2016 年 12 月 27 日下午 12:15，Or Madipor [email protected]写道：

@jfgilliam当您说“移动一点”时，您是什么意思？
改变窗口位置？

—
你收到这个是因为你被提到了。
直接回复此电子邮件，在 GitHub 上查看它，或将线程静音。

我在 1.6.2 上也遇到了这个问题。 使用 Electron 1.4.14 解决了这个问题。 我正在运行 Xbuntu 14.04。

@davydka我也可以在香草 Ubuntu 16.04 上确认这个问题。 切换回 1.4.14 解决了它。 出于好奇，您的操作系统上是否启用了 UI 缩放？ 我注意到当我降级到 1.4.14 时，我的整个电子窗口的缩放比例发生了变化，所以也许这个错误是由 1.6.2 试图尊重 linux ui 缩放参数引起的，但是在这个过程中弄乱了透明度？ 就我而言，我确实启用了 1.25 倍的 ui 缩放。

是的，它适用于 1.4.14，但不适用于“最新”版本。
还需要参数“--enable-transparent-visuals”。
我在带有开源 NVIDIA 驱动程序的 Fedora 25 上使用电子。

@optimisme在您的情况下，操作系统级别的 UI 缩放与它有什么关系？

这个问题会在 1.6.x 中修复吗？ 我不想降级到 1.4.x，因为我正在制作一个需要最新 Chromium 的网络浏览器。

这应该是 IMO 的一个高优先级问题，因为它打破了许多程序所依赖的现有行为

@samkelly抱歉耽搁了。 我没有使用任何 UI 缩放。 在 xfce 中，我检查了 Settings Editor-> xsettings -> Xft -> DPI，我的值为 -1。 一世

同样的问题，如果我添加命令行选项--enable-transparent-visuals ， --disable-gpu （或无/两者）没有区别。

使用：

• 硬件：惠普笔记本电脑（无特殊 GPU、Mesa 驱动）
• 操作系统：Linux (openSUSE Tumbleweed)
• 图形用户界面：KDE5（等离子）
• 窗口管理器：默认 (Kwin/plasma) - 启用合成（Xrender 或 OpenGL 2.0）
• 节点JS：7.4.0
• 铬：56.0.2924.87
• 电子：v1.6.2

@sam0x17 ，我的硬件/软件没有缩放

好的，缩放可能不相关，那么

是的，它适用于 1.4.14，但不适用于“最新”版本。

报告它在 1.4.14 中工作的人是否可以给这个评论一个 👍 如果它仍然在 1.4.15 中工作，如果它在 1.4.15 中没有工作，一个👎？

我正在尝试缩小这是否由于 Electron 更改或 Chrome 升级而退化，谢谢。

@kevinsawicki它甚至可以在 1.4.16 上运行。

@Sential好的，所以您只开始在 1.5.x 和 1.6.x 中看到问题？

在 Electron 1.4.x 上，我在 Debian 8 Jessie 和 Gnome 3.14 上存在另一个透明度问题。 我添加了--enable-transparent-visuals选项。 Devtools 也有这个问题。 我正在使用 NVIDIA 封闭驱动程序。

好的，刚刚尝试了 1.4.15 和 1.4.16，并且在使用--enable-transparent-visuals时可以正常工作。
在 1.5.x 上，它开始不再显示透明度。

一样：

new BrowserWindow({
width: 800, 
height: 600, 
transparent: true,
frame: false })

还有白背。

可以确认 >1.4.16 透明度被破坏。 运行一个定制的 Ubuntu 16.4 发行版，我尝试了很多东西，比如窗口大小、类型等，但唯一解决它的就是降级到 1.4.16。

嘿嘿，我也有这个问题。 这阻碍了我的项目，有什么消息吗？

由于这个问题，我们仍然锁定到 1.4.16。 有人与铬团队讨论过这个问题吗？

同样在这里，希望有一些消息

_使用FastHub从我的 Google Pixel XL 发送 _

听起来我们需要更多的透明度。

这个问题不应该被关闭

是的，因为 1.4.16 透明度被打破了......问题应该保持开放@zcbenz

最近的 beta v1.8.1 似乎没有修复。

令人沮丧的是，电子曾经被宣传为唯一支持半透明的跨平台桌面应用程序框架，现在已经用wontfix标记了该功能：/

我们仍然锁定旧版本

编辑：技术上java也支持这个

很高兴听到 Electron 团队的某个人告诉我们他们的想法。 显然，它已在 2016 年与https://bugs.chromium.org/p/chromium/issues/detail?id=589509 合作。 那是在六月，就在票被标记为wont-fix之后。

看来它应该在操作系统上工作。 我要测试最新的 chrome 并报告。

谢谢

这个问题应该很快就会解决，在此之前，Linux 应该被标记为broken Electron 平台。 任何需要透明效果的应用概念都会因此而失效。

@zcbenz这应该是现在的重中之重，因为现在有许多公司（包括我的）和开源项目将其桌面应用程序的电子版本锁定到 1.4.16 - 请参阅上面@gabrielstuff的评论听起来 Chrome 团队已经解决了这个问题，在这种情况下，我们终于可以解决这个问题了

@sam0x17
嗨，我在 Ubuntu 16.04 中使用电子 - “1.7.8”，电子生成器 - “^19.45.4”时遇到了同样的问题，我通过在我的 *.desktop 文件中向 Exec 添加选项--enable-transparent-visuals --disable-gpu来修复它.
现在我的桌面文件中的“Exec”看起来像"/opt/StepShot Guides/StepShot Guides" --enable-transparent-visuals --disable-gpu %U 。
这篇文章帮助我解决了这个问题https://www.techiediaries.com/github-electron/how-to-make-a-transparent-window-with-github-electron/

@palyga是的，我知道--enable-transparent-visuals --disable-gpu技巧（这在 2015 年曾经对我有用，过去两年我一直在尝试修复它）。 AFAIK 始终需要这些选项来获得透明度以在 linux 上工作，但即使在 1.4.16 版之后使用这些选项，Linux 上的功能也已被破坏......这是否突然在 1.7.8 中工作？？？？

更新：最近五个版本的发行说明中似乎没有任何关于 linux 半透明性的内容，所以我猜这要么是通过 chromium 平台升级在不知不觉中修复的，要么实际上并没有修复。

透明窗口的能力是 Chromium 提供的，但他们从来没有正式支持过这个功能，所以我们必须在我们这边给 Chromium 打补丁才能使透明窗口工作。

但是在 Chromium 复杂的 GPU 渲染下，让浏览器窗口透明确实是一件非常辛苦的工作，需要相关知识和充足的时间才能让事情完美运行。 不幸的是，我们在 Electron 团队中没有这些资源。

至于 Chromium 中的修复，我们已经在 Electron 中进行了修复，但透明窗口从未成为 Chromium 的官方功能，他们没有做太多测试，也不保证它会起作用。

@zcbenz好吧，作为使用 Chromium 项目的最重要的项目之一，鉴于对该功能的支持越来越多，我认为您至少可以向 Chromium 团队提出关注并尝试合作开发一个好的修复问题。

这阻碍了许多项目和团队，包括我的项目和一些大型项目和团队，如广泛使用的 Slack 桌面应用程序。

当我说我相信这值得更多关注时，我想我在这个问题上代表每个人。 对于大量的开发人员来说，这是一个令人头疼的问题。

为了分享我的情况，我不得不停止我的项目的开发，这非常严重并且有一个工作的 MVP，因为我意识到这个错误被推迟并且没有提供任何信息，没有已知的努力或采取措施来推进它。

我知道这不是微不足道的，而且这取决于 Chromium 团队的很多人，但如果电子团队“正式”向 Chrome 提出这个问题，我们将不胜感激，因为您的用户对这个功能的支持已经在这些评论中明确表达了.

至少，我们想知道这是否会被考虑，或者我们是否应该转移到 NWJS 以至少能够运送我们的产品，而不是由于限制而更改或取消它们。

我希望我的担忧不会被忽视，我非常尊重电子开发团队，我只是对没有采取任何已知步骤并且没有人认真对待我们的问题感到沮丧。

希望如果您与 Chromium 团队交谈，他们将为透明度提供官方支持并与您合作。 这对他们来说可能几乎是微不足道的。 他们只需要知道这对他们的许多用户来说是很严重的事情（通过电子平台）。

谢谢你，美好的一天:)

缺乏官方答案确实令人沮丧。
正是出于这个原因，我已经迁移到 NWJS。
可悲的是，在这个问题解决之前，我不能使用和/或推荐 Electron。
美好的一天。 :)

@justUmen只是好奇，但由于问题源于 Chrome，同样的问题不会影响 NW.js 吗？ 如果没有，那么我肯定会开启未来的项目。

我只是一个用户，我不知道问题来自哪里。
我只能说：我对最后一个 nw.js 和我的自定义浏览器没有透明度问题。
nw.js v0.26.6
Node v9.1.0
Chromium 62.0.3202.94
我什至不知道 Electron 现在使用的是什么 chrome 版本，但 62.0.3202 不是最后一个稳定版吗？

它只是在我的系统上，我使用了https://dl.nwjs.io/v0.26.6/nwjs-v0.26.6-linux-x64.tar.gz。
但我没有在干净的环境中尝试。

从https://nwjs.io/blog/v0.26.0/ ， nw.js正在使用Chrome 62.0.3202.62 。 问题是 nw.js 使用 Chromium 的自定义构建，例如https://github.com/nwjs/chromium.src/pull/97/commits/6b98d3a1a5aba6980edb95fc8c0db24132c87a5a其中 Electron 使用的是 Chromium Render 的一部分未触及： https ://electronjs.org/docs/tutorial/about#core -philosophy

它可能来自那里。

我一直坚持使用[email protected] ，它使用的是 Chrome 53.0.2785.143。

好的，我终于找到了解决方案！ 使用最新的电子版本和主进程透明度中的此代码在所有窗口中都可以正常工作：

const {app, BrowserWindow, protocol} = electron

app.disableHardwareAcceleration()

app.on('ready', () => {
  protocol.unregisterProtocol('', () => {
    new BrowserWindow({
      width: anysize,
      height: anysize,
      frame: false,
      transparent: true
    })
  })
})

我不知道protocol.unregisterProtocol 做了什么，但对他来说，透明度工作得很好。
谁知道使用这个功能是否不好，请告诉我。

@rewhex所以这适用于linux？

@sam0x17是的，我正在使用 openSUSE，工作正常。

可能需要足够的时间来禁用加速。 我们没有使用 unregisterProtocol，但我们有一个足够长的初始化，看起来，所以透明度也适用于 openSUSE。

@bundyo所以，在我的示例中取消注册协议，只是为新的 BrowserWindow 腾出更多时间？

这只是一个猜测，因为没有它它也可以在这里工作。

@bundyo是的，我明白了，在 10 毫秒内使用 setTimeout，透明度有效。

@rewhex您是否在 Windows Server 2008 R2 上尝试过这个？

@madipor ，不，我只有 openSUSE 操作系统。

在https://github.com/zeit/hyper/pull/2571上测试了 @rewhex解决方案，它可以在没有app.disableHardwareAcceleration()的情况下工作

let mainWindow
app.disableHardwareAcceleration();

function createWindow () {
  protocol.unregisterProtocol('',()=>{
    mainWindow = new BrowserWindow({
      width: 200, 
      height: 250,
      transparent: true,
      frame: false,
      show: false
      })
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
  mainWindow.on('closed', function () {
    mainWindow = null
  })
  setTimeout(() => {
    console.log('The window will now show up')
  }, 2000);
  mainWindow.once('ready-to-show',()=>{
    mainWindow.show()
  })
  })
}
app.on('ready', createWindow)

以上是我的简单窗口代码。

我也试过--enable-transparent-visuals --disable-gpu 。 但无济于事。

我目前正在使用以下机器配置：

Windows 7 x64 (VirtualBox Windows)
RAM: 2048
Graphics: No Graphics acceleration in VirtualBox
Electron 1.4.14 --global
Electron 1.4.14 --local 

请帮我！ 我的客户会杀了我。 这是唯一需要解决的问题。

而且它在我的装有最新版 Electron 的 Windows 10 PC 上也能正常工作。

@Himujjal这可能是因为您在VirtualBox中禁用了图形加速。 像这样透明的东西通常使用图形加速来实现透明度😉

可以确认透明度解决方法适用于最新版本：

app.on('ready', async () => {
  await Promise.delay(10) // transparency workaround
  await createMainWindow()
})

对我来说，问题出在开发者控制台上，如果应用程序以开发者控制台活动启动，只需评论这一行 win.webContents.openDevTools()

@hesus123是的，打开开发控制台将禁用半透明。

我可以使用app.disableHardwareAcceleration();和BrowserWindow的“延迟”创建来确认修复。 就我而言，我只是使用了：

setTimeout(createWindow);

而不是直接调用（ createWindow() ）。

然而，同时拥有 :smile: （硬件加速和透明度）会很棒。

Debian Stretch (9.3) 在带有 Electron 1.8.3 的 Dell XPS 13 (9370) 上运行。

是的，具有讽刺意味的是，硬件加速可能对半透明窗口的渲染有很大帮助

我不需要disableHardwareAcceleration() ，只需要在创建窗口setTimeout(() => {..}, 100)之前添加足够长的延迟。

10很多时候都太短了， 100在 macOS 和 Linux 上都可以可靠地工作。

我确认@alexcroox 。 当前在 Ubuntu 17.10 和 Intel HD Graphics 520 上的电子快速启动（电子 1.8.4）。只需执行transparent:true和app.on('ready', () => setTimeout(createWindow, 100))即可。 而10毫秒则没有。 无需硬件减速。 谢谢！！！

不确定究竟是哪个版本，但我现在有一个新行为，开发工具将其变为白色，但现在即使关闭 devtools 也会使其保持白色。

此外，如果 chrome 远程实例与屏幕共享连接，则会触发相同的错误。

我也遇到这个问题。 我在带有 compton 合成器的 arch linux 中使用[email protected] 。
仅当我调用app.disableHardwareAcceleration()并延迟窗口创建时，透明度才有效
与app.on('ready', () => setTimeout(createWindow, 100)) 。 如果缺少其中任何一个，则背景为黑色且未更新，以前渲染的帧可见。

问题是动画在没有硬件加速的情况下很笨拙。

我在 Chromium 的错误跟踪器中创建了一个错误： https ://bugs.chromium.org/p/chromium/issues/detail?id=854601

如果您能插话，给问题加注星标并在那里分享您的信息，我们将不胜感激，以便我们帮助他们解决这个问题。

我们提供的支持和信息越多越好。 请记住不要用“+1”评论发送垃圾邮件，这就是星星的用途。

现在，走吧！

PD：如果有人能够创建一个独立且最小的示例，使用最新版本的 Electrum（应该包含最新使用的 Chromium 版本）复制此错误，那将对 Chromium 开发人员非常有帮助！

@DaniGuardiola我创建了一个示例来演示该问题（https://github.com/kabalage/electron-transparency-issue），并将其发布在 Chromium 错误跟踪器中。 谢谢你的帮忙。

该问题已由 Chromium 团队重现！ https://bugs.chromium.org/p/chromium/issues/detail?id=854601#c7

我建议对 Chromium 团队的官方修复感兴趣的每个人都去为该项目加注星标，并提供您拥有的任何相关信息。 这将使错误更加可见！

我设法通过给body赋予height: 0%来获得透明效果：
html, body { background: rgba(226, 226, 226, 0.144); height: 0%; }

嗨@zcbenz ，Chromium 团队在这个问题中回复了

Chromium 应该支持透明度，前提是您选择了一个 rgba 视觉效果（这有点不重要，但请看这里是如何完成的），并且您当然有一个合成管理器。

我不知道电子是如何设置它的窗口的，所以我不知道它是否真的连接正确。

你认为有什么机会可以帮助他们从 Electron 方面解决问题吗？

谢谢

仍然没有修复。

我也遇到这个问题。 我在带有 compton 合成器的 arch linux 中使用[email protected] 。
仅当我调用app.disableHardwareAcceleration()并延迟窗口创建时，透明度才有效
与app.on('ready', () => setTimeout(createWindow, 100)) 。 如果缺少其中任何一个，则背景为黑色且未更新，以前渲染的帧可见。

问题是动画在没有硬件加速的情况下很笨拙。

仍然没有修复，这对我有用

在不禁用硬件加速的情况下获得了另一种解决方法^^
我发现它与主窗口和后端 JS 文件中创建的所有窗口有关。
在我的主窗口的 html 页面中打开一个默认为“window.open(...)”的窗口并在后端 JS 中捕获事件时，我设法获得了透明度。 在事件侦听器中创建的所有电子 BrowserWindow 实例都能够获得透明度，除非正在使用 devTools。

win.webContents.on('new-window', (event, url, frameName, disposition, options, additionalFeatures) => {
        event.preventDefault();
        // create your BrowserWindow here :)
});

@Airwiq太好了，是的，devtools 的事情与我的经验一致。 如果 devtools 是打开的，就不可能有半透明。

对我来说，我必须将等待延迟设置为 300 毫秒！

已要求为此举办活动。 https://github.com/electron/electron/issues/15947

我仍然有这个问题，而且对我来说更糟。 开始时我得到了一个全黑窗口，我尝试过setTimeout ， --enable-transparent-visuals --disable-gpu ， disableHardwareAcceleration ，但是对我没有用，在其他情况下，我得到了一半的黑色窗口（一半是透明的）。
Electron : 6.0.0-beta.5 ;
OS : Window10(64bit), Window7(32bit in VM)

您是否尝试过在创建窗口之前添加一个巨大的等待时间（至少 500 毫秒）
https://stackoverflow.com/a/54784577/1619521

如果你克隆这个 repo并将延迟设置为 0ms、100ms 和 500ms，会有什么行为？

@doom-fr
当参数frame为true时，我得到了窗口的两种状态。 状态1：一开始，窗口是透明的； State2：大约1000ms后，窗口变成黑色。 我没有加载html，所以窗口是空的； 这发生在我运行start和startWithTransparentOption时，而startWithAllOptions直接导致窗口变黑。

当参数frame为false时，我直接得到一个白色窗口。 不管剧本是什么。

您是否尝试将电子降级，例如降级到版本 4.* ？

@doom-fr 是的，我做到了。 electron的版本是4.2.5 。

@vifird尝试将 wait 设置为3000 ms 。
（我知道，这是不可接受的，但这只是为了测试目的）

记得测试npm start和npm run startWithTransparentOption和npm run startWithAllOptions
也许也尝试放回 html 的负载。

此问题不应该关闭，请重新打开它，谢谢！

如果在创建窗口之前等待 3000 毫秒可以解决您的问题

您是否尝试过在创建窗口之前添加一个巨大的等待时间（至少 500 毫秒）
https://stackoverflow.com/a/54784577/1619521

如果你克隆这个 repo并将延迟设置为 0ms、100ms 和 500ms，会有什么行为？

那么这个问题对你有好处：
https://github.com/electron/electron/issues/16809

我的情况正好相反，windows 7 pro，应用程序窗口在启动时是透明的。

没有多少等待可以解决我的问题。 在 Windows 10 上使用最新版本的 Electron。

我在 Windows 10、Electron v8 上玩了很多这些选项，发现当我在没有开发工具的情况下启动应用程序或在开发工具未停靠的情况下启动应用程序时，透明度会起作用
例如： openDevTools({mode:'undocked'})

在linux上同样的问题。 透明度不起作用，它与窗口大小无关。

已经5年了，但仍然无法修复。 😿

如果有人遇到同样的问题，我发现解决的唯一方法是禁用硬件加速。

app.disableHardwareAcceleration();

app.on('ready', () => {
  setTimeout(() => {
    createWindow();
    autoUpdater.checkForUpdatesAndNotify();
    createMenu();
  }, 50);
});

我希望对某人有所帮助...