Can't succeed in making transparent window in Electron (javascript)

Question

I am trying to make a transparent window with ElectronJs but I obtain a black background.

I am on Linux (Debian Jessie)

I have tried different versions : lat

Answer 1

if any one getting this error with new version you have disable or undocked developer tools then you will be able to succeed with transparent window

win.webContents.openDevTools({mode:'undocked'})

Answer 2

BrowserWindow {transparent: true} works if you don't open devTools i.e. don't add

YourNewBrowserWindow.webContents.openDevTools() to the main.js (or electron.js) script

Answer 3

It's a very old regression bug in Electron project.

See https://github.com/electron/electron/issues/15947

To bypass that problem, just downgrade to 1.4.16 2.0.16, the last working version.

---

EDIT 1 : if you wait at least 300ms after ready event to open windows it will work correctly

app.on('ready', () => setTimeout(onAppReady, 300));

And you do not need --disable-gpu option in your package.json

"start": "electron --enable-transparent-visuals ."

---

EDIT 2 : To make it works out of the box, use this repo : https://gitlab.com/doom-fr/electron-transparency-demo

git clone https://gitlab.com/doom-fr/electron-transparency-demo
cd electron-transparency-demo
npm install
npm start
# or npm run startWithTransparentOption
# or npm run startWithAllOptions

for me works with npm start and npm run startWithTransparentOption

---

EDIT 3 : Please have a look also to @Thalinda Bandara answer below : It might be interresting (not tested but already seen it elsewhere).

Answer 4

I found a way to get it working! Try creating your window 10 milliseconds after Electron's ready, like this:

app.on('ready', function () {
    setTimeout(function() {
        createWindow();
    }, 10);
});

Instead of: app.on('ready', createWindow);

I found it from this Github post: https://github.com/electron/electron/issues/2170#issuecomment-361549395

Also, you need to keep these command line flags for it to work: --enable-transparent-visuals --disable-gpu

---

Unfortunately Electron doesn't support transparent windows on linux.

I have actually tried a bunch of things to get it working but nothing has worked yet.

Source: https://github.com/electron/electron/issues/8532#issuecomment-306383343