Transparent window has white background window

[delvedor]

Hi, I've some issue with the transparent window, my code is:

win = new BrowserWindow({
  width: 100,
  height: 50,
  transparent: true,
  frame: false
});

On Mac I have not any kind of problem, on my Windows 7 Parallels virtual machine again no problem, but on another pc (not virtualized) with Windows 7 transparent windows doesn't work (I have a white background).

I haven't error logs from console.
In both Windows 7 machines I have DWM enabled and running (in fact, both are using aero).

[zcbenz]

This is usually related to hardware, can you open the chrome://gpu url on each machine and compare the results?

[delvedor]

Graphics Feature Status - exactly the same in mac, windows virtualized (via parallels) and windows pc.
Driver Bug Workarounds - the same in both windows machine, different in mac
Problems Detected - the same in both windows machine, different in mac
Version Information & Driver Information - similar but changes some parameters in every machine, like GPU0, Sanboxed, Driver version/vendor.

If you want I can provide you more accurate screenshots.

[zcbenz]

I think it is a bug of Chrome's rendering code, and it should be GPU/hardware related. I'm afraid we can not fix it on Electron's side.

[delvedor]

Ok, so your advice is to wait for the next versions of Chrome?

[delvedor]

I have an update, that's strange.

On the virtualized Windows, as you know is all ok, but on the pc if the window is at least 160x80 pixels, the transparent option works.

In my specific case, 100x50px is the standard size of my window, I increase the dimensions by 12x5px every time I click on my own button by using

win.setSize(x, y);

Recap:
dimension < 160x80px : white background
dimension >= 160x80px : transparent background

[ankitaggarwal011]

I can confirm this on my windows 7(x64) machine as well. When the transparent flag is set to true.
Just as @delvedor said, for,
dimension < 160x80px : white background
dimension >= 160x80px : transparent background

Update:
There is another possibly related issue that I came across while confirming this one. I have documented it at #2184.

[ghost]

I came across this recently as well, and I've fiddled with the height and width to try see what happens. Turns out that if both width and height values are smaller than 160, you will see the white screen, ie

159 x 159 = white screen

However if at least one value is >= 160 than it will be transparent, so

160 x 1 = transparent
1 x 160 = transparent

I tried to see if re-sizing the browser window programmatically might help, but it doesn't, although I did see that it adds the white background behind the window. If you are using a background of say rgba(0,0,0,0.2) you will see it will be discoloured because of the white window behind it

[frankhale]

This is most likely related to this issue: #861

[kevinmartin]

I'm on the latest Electron (v0.33.6) and on Yosemite. It works fully for me... I instantiate the window like so:

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

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

The only flaw I see is when I open Dev Tools, the background is white until I close it, then it becomes transparent.

[kevinmartin]

Just realized this seems to be an issue with Microsoft Windows

[delvedor]

@kevinmartin yes, it is!

[alexgleason]

EDIT: Sweet! adding --enable-transparent-visuals --disable-gpu in the command line makes it work for me. Should have read the docs more carefully.

Also having this problem on Linux. I'm just trying to do a "Hello world" with transparent bg to see if it works, but I'm getting a white background.

Here's what I have.
main.js
index.html

I'm on elementary OS Freya 64-bit. It's an Ubuntu 14.04 based distro running GTK3.

Tried chrome://gpu and it detected some problems.

[ishankhare07]

i have the same problem on ubuntu linux

[zcbenz]

This issue is deeply related to the hardware and drivers, we are not able to solve this on Electron's side, so I'm closing this as won't fix. For people troubled with this issue, the only suggestion I can give is to wait for upgrades of Chrome and see if it can fix this.

[PaulBGD]

Is it possible to reopen this? I'm experience unique problems on the Cinnamon desktop with Ubuntu 16.04 running the latest NVIDIA drivers.

Example:

How it should look

EDIT: this occurs in GNOME and Unity desktops. This definitely should be fixed.

[madipor]

Hi,

I have the same problem, there is white background.
Windows Express 2008 R2
Electron version: 1.4.12

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

I tried almost everything
any idea??

[doom-fr]

Have you try to downgrade electron, for example to version 4.* ?

[lanistor]

@doom-fr Yeah ,i did. the vertion of electron is 4.2.5.

[doom-fr]

@vifird Try to set wait to 3000 ms.
(I know, this is not acceptable, but it is just for test purpose)

Remember to test npm start and npm run startWithTransparentOption and npm run startWithAllOptions
Maybe try also to put back the load of the html.

[fengerzh]

This issue should not be closed, please reopen it again, thanks!

[doom-fr]

If waiting 3000ms before creating the window fixes your problem

Have you tried to add a huge wait (at least 500ms) before creating you window
https://stackoverflow.com/a/54784577/1619521

What's the behavior if you clone this repo and set delay to 0ms, 100ms and 500ms ?

Then this issue is the good for you :
#16809

[liuzhenyilang]

The opposite happened to me, windows 7 pro, the app window is transparent when started.

[vkolova]

No amount of waiting fixes the problem for me. Using latest version of Electron on Windows 10.

[cookmscott]

I played around with a lot of these options on Windows 10, Electron v8 and found that transparency worked when I launched the application without dev tools or launched with dev tools undocked
ex: openDevTools({mode:'undocked'})

[embu18]

Same issue on linux. Transparency not working and it's not related to window size.

[arnabuchiha]

Its been 5 years but still it couldn't be fixed. 😿

[andredezzy]

If somebody with the same issue, the only way I found to solve, is disabling hardware acceleration.

app.disableHardwareAcceleration();

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

I hope helped somebody...

[serban-mihai]

app.disableHardwareAcceleration();
Timeout to 50

@andredezzy you're my hero, give this guy a beer! 🍺

Tested and working on Linux Mint 20 with XFCE and "electron": "^11.1.0"

[doom-fr]

Be careful, the wait delay seems to depend of the platform.
So an event triggering is needed : see issue #16809

[bundyo]

My take is that with HW accel stopped, the delay is not needed.

[bundyo]

Nah, seems it is still needed.

[sam0x17]

Yeah if you try on a variety of desktop environments / platforms / distros you'll notice it's still needed and it needs to be several seconds to work consistently. Same as back in 2015 :/

[angjelonuho]

I found a different solution for me, I had to disable : webContents.openDevTools() and was working fine.

[sam0x17]

@angjelonuho yes as a general note when dev tools is open translucency automatically turns off because the window mode changes

[Tibinsunny]

I was having a black screen while trying to enable the transparent property on my Arch Linux Manjaro. Adding the flag --enable-transparent-visuals --disable-gpu in the start script inside package.json fixed the issue for me.
I think this is indeed something related to the hardware

[lixiaohulee]

I resolve this problem

if you want to make a transparent window, remember to invoke the window.setBackgroundColor after win.loadUrl or win.loadFile method

const win = new BrowserWindow({ transparent: true, frame: false } win.loadUrl('xxx'). win.setBackgroundColor(' a transparent color like #00000000')

https://github.com/electron/electron/pull/28022/commits/193d41b4b4f9937dbde9ba6f4412b7362cca8e4e

[Wurielle]

Here's my solution for this.
Instead of setting my options in new BrowserWindow(), I set them up right after my window is shown for the very first time.
Setting them before that time can cause the window to not be transparent, event with the setTimeout trick mentioned several times above.

In my experience, any set of options that changes the position of the window can trigger the issue unless I set it after the window is shown at least once.

Also devTools will ALWAYS cause the background to not be transparent if it's attached to the window. I use detach mode to solve this.

import { app, BrowserWindow, screen } from "electron";

app.on('ready', () => {
  const { workAreaSize } = screen.getPrimaryDisplay();
  const window = new BrowserWindow({
    show: false,
    frame: false,
    transparent: true,

    // This is important, set your window's width and height - 1
    width: workAreaSize.width - 1,
    height: workAreaSize.height - 1,

    // Any option you want down there
    maximizable: true,
    resizable: true,
  });

  window.loadURL(THE_URL_TO_YOUR_COOL_WEBSITE);
  window.webContents.openDevTools({ mode: 'detach' });

  window.on('show', () => {
    window.setSize(workAreaSize.width, workAreaSize.height);
    window.center();
  });

  window.on('hide', () => {
    window.setSize(workAreaSize.width - 1, workAreaSize.height - 1);
  });

  window.once('ready-to-show', () => {
    window.show();
  });
});

Edit: After more testing I found out that hiding the transparent window and showing it will make it lose its transparency but changing its size on show will make the transparency work again so I updated my answer to reflect on this.