Electron: 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: https://github.com/atom/electron/issues/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??

[jfgilliam]

I can get transparency to work if I create the window, wait a few seconds for it to render, then move it a little bit.

[madipor]

@jfgilliam what do you mean when you say "move it a little bit"?
change the window position?

[jfgilliam]

Yes. Create the window where you don't want it. Then move it. The key is to wait until it renders.

• Jeff

On Dec 27, 2016, at 12:15 PM, Or Madipor [e-mail] wrote:

@jfgilliam what do you mean when you say "move it a little bit"?
change the window position?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[davydka]

I was having this issue as well on 1.6.2. Using Electron 1.4.14 solves it. I'm running Xbuntu 14.04.

[sam0x17]

@davydka I can confirm this issue as well on vanilla Ubuntu 16.04. Switching back to 1.4.14 solves it. Out of curiosity, do you have UI-scaling enabled on your OS? I noticed that when I downgraded back to 1.4.14 the scaling on my whole electron window changed, so maybe this bug is caused by 1.6.2 trying to respect linux ui scaling parameters, but messing up transparency in the process? In my case, I do have ui scaling enabled at 1.25x.

[optimisme]

Yes, it works on 1.4.14 but does not work on 'latest' version.
Also the argument ' --enable-transparent-visuals' is needed.
I am using electron on Fedora 25 with open source NVIDIA drivers.

[sam0x17]

@optimisme in your case, does os-level UI scaling have anything to do with it?

[sentialx]

Will be the issue fixed in 1.6.x? I don't want to downgrade to 1.4.x, because I'm making a web browser, which requires the newest Chromium.

[sam0x17]

this should be a high priority issue IMO as it breaks existing behavior that a number of programs rely on

[davydka]

@samkelly Sorry for the delay. I'm not using any UI scaling. In xfce I checked Settings Editor-> xsettings –> Xft -> DPI and my value is -1. I

[CharlSteynberg]

Same problem here, no difference if i add the command line options --enable-transparent-visuals, --disable-gpu (or none / both).

Using:

• hardware: HP laptop (no special GPU, Mesa driver)
• OS: Linux (openSUSE Tumbleweed)
• GUI: KDE5 (plasma)
• window manager: default (Kwin/plasma) - compositing enabled (either Xrender, or OpenGL 2.0)
• NodeJS: 7.4.0
• Chrome: 56.0.2924.87
• electron: v1.6.2

[optimisme]

@sam0x17, no scaling with my hardware/software

[sam0x17]

ok, scaling probably unrelated, then

[kevinsawicki]

Yes, it works on 1.4.14 but does not work on 'latest' version.

Can people reporting it working in 1.4.14 give this comment a 👍 if it is still working in 1.4.15 and a 👎 if it isn't working in 1.4.15?

I'm trying to narrow down whether this regressed because of an Electron change or because of a Chrome upgrade, thanks.

[sentialx]

@kevinsawicki it is working even on 1.4.16.

[kevinsawicki]

@Sential okay, so you only start seeing issues in 1.5.x and 1.6.x?

[sentialx]

On Electron 1.4.x I have another issue with transparency on Debian 8 Jessie and Gnome 3.14. I have added --enable-transparent-visuals option. Devtools also have this issue. I'm using NVIDIA closed drivers.

[davydka]

Ok, just tried 1.4.15, and 1.4.16 and it's working when using --enable-transparent-visuals.
On 1.5.x it starts to no longer shows transparency.

[egordorichev]

Same thing:

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

And white back.

[xkisu]

Can confirm that >1.4.16 transparency is broken. Running a custom Ubuntu 16.4 distro, I tried tons of stuff like window sizing, type, etc. but the only thing that fixed it was downgrading to 1.4.16.

[DaniGuardiola]

Hey, I'm having this issue as well. This is blocking for my project, any news?

[sam0x17]

We are still locking to 1.4.16 because of this issue. Has someone taken this up with the chromium team?

[DaniGuardiola]

Same here, would appreciate some news

_Sent from my Google Pixel XL using FastHub_

[davydka]

Sounds like we need more transparency.

[sam0x17]

This issue should not be closed

[gabrielstuff]

Yes, since 1.4.16 transparency is broken.... issue should stay open @zcbenz

[verashira]

Does not seem to be fixed with most recent beta v1.8.1.

[sam0x17]

It's a bit frustrating that electron used to be advertised as the only cross platform desktop app framework that supports translucency, and has now marked that feature with a wontfix :/

We are still locking to the old version

edit: technically java supports this as well

[gabrielstuff]

Would be nice to hear someone from Electron team tell us what they think. Apparently it has been work on it in 2016 with https://bugs.chromium.org/p/chromium/issues/detail?id=589509. It was in June, just after the ticket has been marked as wont-fix.

It appears that it should work on the os. I'm going to test latest chrome and report.

Thanks

[sidneys]

This issue should be resolved soon, until then, Linux should be marked as a broken Electron platform. Any application concepts requiring transparency effects are invalidated by this.

[sam0x17]

@zcbenz this should be a top priority right now as there are now a number of companies (including mine) and open source projects locking the electron versions for their desktop apps to 1.4.16 -- please see @gabrielstuff's comment above as it sounds like the Chrome team has a fix for this, in which case we can finally resolve this

[palyga]

@sam0x17
Hi, I had the same issue in Ubuntu 16.04 with electron - "1.7.8", electron-builder - "^19.45.4", I fixed it by adding options --enable-transparent-visuals --disable-gpu to Exec in my *.desktop file.
Now "Exec" in my desktop file look like "/opt/StepShot Guides/StepShot Guides" --enable-transparent-visuals --disable-gpu %U.
This article helped me to solve the issue https://www.techiediaries.com/github-electron/how-to-make-a-transparent-window-with-github-electron/

[sam0x17]

@palyga Yes I am aware of the --enable-transparent-visuals --disable-gpu trick (this used to work for me back in 2015, and I have been trying to fix it for the last two years). AFAIK these options were always required to get transparency to work on linux, but the functionality has been broken on linux even with these options since after version 1.4.16... Is this suddenly working in 1.7.8????

Update: there doesn't seem to be anything in the release notes for the last five versions regarding translucency on linux, so I'm guessing either this was fixed unknowingly via a chromium platform upgrade, or it is not actually fixed.

[zcbenz]

The ability of transparent window is provided by Chromium, but they never officially supported this feature, so we have to patch Chromium on our side to make transparent window work.

But with the complex GPU rendering of Chromium, making the browser window transparent is really very hard work, and requires related knowledge and plenty of time to make things work perfectly. Unfortunately we don't have those resources in Electron team.

[zcbenz]

As for the fixes in Chromium, we already have them in Electron, but transparent window has never been an official feature of Chromium, they did not do much tests and they do not guarantee it would work.

[DaniGuardiola]

@zcbenz well, as one of the most important projects making use of the Chromium project, and given the rising amount of support for this feature, I figure you can at least raise the concern to the Chromium team and try to collaboratively work on a good fix for the issue.

This is blocking to many projects and teams, including mine and some big ones like the Slack desktop app which is widely used.

I think I speak for everyone on this issue when I say that I believe this deserves more attention. It is a big headache for tons of devs.

To share my case, I had to halt development of my project, which was pretty serious and has a working MVP, because I realized this bug was being postponed and no information was given, without known efforts or steps taken to progress on it.

I know it is not trivial and than it depends a lot of the Chromium team, but we would appreciate if the electron team raised the issue "officially" to Chrome, as the support for this feature from your users has been clearly expressed in these comments.

At the very least, we would like to know if this will ever be considered or if we should just move to NWJS to at least be able to ship our products instead of changing or cancelling them due to limitations.

I hope my concerns don't come as inconsiderate, I have a huge respect for the electron dev team, I'm just frustrated that there are no known steps being taken and no one is taking our issue seriously.

Hopefully, if you talk to the Chromium team, they will give official support to transparency and work with you on it. It's probably almost trivial to them. They just need to know this is something serious to a lot of their users (through the electron platform).

Thank you and good day :)

[justUmen]

The lack of an official answer is indeed frustrating.
I've migrated to NWJS for this exact reason.
Sadly, I can't use and/or recommend Electron until this is resolved.
Good day all. :)

[davydka]

@justUmen Just curious but since the problem stems from Chrome, doesn't the same issue affect NW.js? If not then I'll definitely be switching on future projects.

[justUmen]

I'm just a user, I have no idea where the problem come from.
All i can say is that : I have no transparency problem with the last nw.js and my custom browser.
nw.js v0.26.6
Node v9.1.0
Chromium 62.0.3202.94
I don't even know what chrome version Electron is using now, but isn't 62.0.3202 the last stable ?

[justUmen]

It's just on my system, i have used https://dl.nwjs.io/v0.26.6/nwjs-v0.26.6-linux-x64.tar.gz.
But I didn't try in a clean environment.

[gabrielstuff]

From https://nwjs.io/blog/v0.26.0/, nw.js is using Chrome 62.0.3202.62. The thing is that nw.js use a custom build of Chromium see for instance https://github.com/nwjs/chromium.src/pull/97/commits/6b98d3a1a5aba6980edb95fc8c0db24132c87a5a where Electron is using a part of Chromium Render not touched: https://electronjs.org/docs/tutorial/about#core-philosophy

It might come from there.

[davydka]

I've been sticking with [email protected] and that is using Chrome 53.0.2785.143.

[rewhex]

okay, finally I found a solution! Using latest electron version and this code in main proccess transparency works fine in all windows:

const {app, BrowserWindow, protocol} = electron

app.disableHardwareAcceleration()

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

I don't know what protocol.unregisterProtocol does, but with him, transparency working fine.
Who knows if use this function is bad, please tell me about it.

[sam0x17]

@rewhex so this works on linux?

[rewhex]

@sam0x17 yes, i'm using openSUSE, works fine.

[bundyo]

Probably needs sufficient time to disable the acceleration. We're not using unregisterProtocol, but we have a sufficiently long init, it seems, so transparency works on openSUSE too.

[rewhex]

@bundyo so, unregisterProtocol in my example, just make more time for new BrowserWindow?

[bundyo]

This is just a guess, since it works here without it.

[rewhex]

@bundyo true, i see, using setTimeout in 10 ms, transparency works.

[madipor]

@rewhex Did you try this for Windows Server 2008 R2?

[rewhex]

@madipor , no, i have only openSUSE os.

[stepanvanzuriak]

Tested @rewhex solution on https://github.com/zeit/hyper/pull/2571 and it works without app.disableHardwareAcceleration()

[Himujjal]

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)

The above is my code for a simple window.

I also tried --enable-transparent-visuals --disable-gpu. But to no avail.

I am currently using the following machine configuration:

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

Please help me! My client is gonna kill me. This is the only problem left to solve.

And also its working damn fine in my Windows 10 PC with the latest version of Electron.

[xkisu]

@Himujjal It's probably because your in VirtualBox with graphics acceleration disabled. Transparent stuff like this normally uses graphics acceleration for the transparency 😉

[DaniGuardiola]

Can confirm transparency workaround works for latest version:

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

[AlexandruMares]

For me the problem was with the developer console, if the app starts with the developer console active just comment this line win.webContents.openDevTools()

[sam0x17]

@hesus123 yes having dev console open will disable translucency.

[VinceOPS]

I can confirm the fix using app.disableHardwareAcceleration(); and a "delayed" creation of BrowserWindow. In my case, I simply used:

setTimeout(createWindow);

instead of a direct call (createWindow()).

Yet it would be great to have both :smile: (hardware acceleration and transparency).

Debian Stretch (9.3) running on a Dell XPS 13 (9370) with Electron 1.8.3.

[sam0x17]

Yes, ironically hardware acceleration would probably help a lot with the rendering of a translucent window

[alexcroox]

I didn't need to disableHardwareAcceleration(), just needed to add a long enough delay before creating the window setTimeout(() => {..}, 100).

10 was too short a lot of the time, 100 has been working reliably on both macOS and Linux.

[mncharity]

I confirm @alexcroox . Current electron-quick-start (electron 1.8.4) on Ubuntu 17.10 and Intel HD Graphics 520. Simply doing transparent:true and app.on('ready', () => setTimeout(createWindow, 100)) works. And 10 ms doesn't. No hardware deceleration needed. Thank you!!!

[natew]

Not sure exactly which version, but I have a new behavior now where the dev tools turns it white, but now even turning off devtools keeps it white.

Also if a chrome remote instance connects with screensharing, the same bug triggers.

[kabalage]

I too experience this problem. I'm using [email protected] in arch linux with compton compositor.
Transparency only works if I call app.disableHardwareAcceleration() and delay window creation
with app.on('ready', () => setTimeout(createWindow, 100)). If any of these is missing, the background is black and does not get updated, previously rendered frames are visible.

The problem is that animations are janky without hardware acceleration.

[DaniGuardiola]

I created a bug in Chromium's bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=854601

I'd appreciate if you can chime in, star the issue and share your information there so that we can help them solve this.

The more support and information we give, the better. Just remember not to spam with "+1" comments, that's what the stars are for.

Now go!

[DaniGuardiola]

PD: if someone is able to create a self-contained and minimal example that replicates this bug with the latest version of Electrum (that should contain the latest used version of Chromium), that would be very helpful to the Chromium devs!

[kabalage]

@DaniGuardiola I created an example demonstrating the issue (https://github.com/kabalage/electron-transparency-issue) and also posted it in the Chromium bug tracker. Thank you for helping.

[DaniGuardiola]

The issue has been reproduced by the Chromium team! https://bugs.chromium.org/p/chromium/issues/detail?id=854601#c7

I suggest everyone interested in an official fix by the Chromium team to go and star the project, and offer any relevant information you have. That will give the bug more visibility!

[evya]

I've managed to get the transparent effect by giving a height: 0% to the body:
html, body { background: rgba(226, 226, 226, 0.144); height: 0%; }

[durasj]

Hi @zcbenz, the Chromium team responded in the issue with

Chromium should support transparency, provided you pick a rgba visual (which is somewhat non-trivial, but see how it's done here), and that you have a compositing manager of course.

I have no idea how electron sets up its window, so I don't know if it's actually hooked up properly or not.

Do you think there is any chance you could help them figure it out from the Electron side?

Thank you

[Sombian]

still not fixed.

[eNzyOfficial]

I too experience this problem. I'm using [email protected] in arch linux with compton compositor.
Transparency only works if I call app.disableHardwareAcceleration() and delay window creation
with app.on('ready', () => setTimeout(createWindow, 100)). If any of these is missing, the background is black and does not get updated, previously rendered frames are visible.

The problem is that animations are janky without hardware acceleration.

Still not fixed, this worked for me

[Airwiq]

Got another workaround without disabling the hardware acceleration^^
I found out that it has something to do with the main window and all windows created in the backend JS file.
I’ve managed to get transparency when opening a window with the default “window.open(…)” in the html page within my main window and catching the event in the backend JS. All electron BrowserWindow instances created in the event listener are all able to obtain transparency, except when the devTools are being used.

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

[sam0x17]

@Airwiq that's great, and yes the devtools thing is consistent with my experience. If devtools is open it's impossible to have translucency.

[doom-fr]

For me, I have to set wait delay up to 300ms !!

Have requested an event on this. https://github.com/electron/electron/issues/15947

[lanistor]

I still have this problem, and it's worse for me. I got a whole black window when start, i have tried setTimeout,--enable-transparent-visuals --disable-gpu,disableHardwareAcceleration, but nothing works for me, in other cases, i got half black window(half is transparent).
Electron: 6.0.0-beta.5;
OS: Window10(64bit), Window7(32bit in VM)

[doom-fr]

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 ?

[lanistor]

@doom-fr
When the parameter frame was true, i got two states of the window. State 1: at the beginning, the window was transparent; State2: after about 1000ms later, the window turned into black. I didn't load the html, so the window was empty; and this happened when i runed start and startWithTransparentOption, while startWithAllOptions directly leaded the window to be black.

When the parameter frame was false, i got a white window directly. no mater what the script was.

[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 :
https://github.com/electron/electron/issues/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...