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

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).


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

Tags:

Electron

Recent Posts