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

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 : latest, beta and nightly with the same result.

I have a version for NW.js that works on the same machine, so I expect it is a Electron problem.

Here is my code of main.js:

const {app, BrowserWindow} = require('electron');
let mainWindow;
function createWindow () {
  mainWindow = new BrowserWindow({width: 920, height: 300,  frame:true, transparent:true, backgroundColor: '#00FFFFFF'});
  mainWindow.loadFile('index.html');
  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}
app.on('ready', createWindow);

Here is my code of index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body style="background-color:rgba(255,255,255,0); color:lightgrey;">
    <h1>Hello World!</h1>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.

    <script>
      // You can also require other files to run in this process
      // require('./renderer.js')
    </script>
  </body>
</html>

The problem is that background is not transparent but black :

Have tried different things without success (for example app.disableHardwareAcceleration())

Does someone knows the solution or have a full working example ?

Thx

Edit 1 : Have also tried with and without --enable-transparent-visuals --disable-gpu as said here

javascript electron

Solution 1:^[1]

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

Solution 2:^[2]

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

Solution 3:^[3]

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'})

Solution 4:^[4]

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

Solution 5:^[5]

I noticed that the white window disappears after redrawing it (after a resize for example). In my code I wrote this:

function createWindow() {
  const size = screen.getPrimaryDisplay().workAreaSize;

  // Create the browser window.
  win = new BrowserWindow({
    width: size.width - 1,
    height: size.height - 1,
    minWidth: 260,
    minHeight: 360,
    frame: false,
    transparent: true,
    webPreferences: {
      // ...
    },
  });

  win.setBackgroundColor("#000000");
  win.webContents.setFrameRate(60);

  // Set maximized size
  win.maximize(); // change window size -> redrawing
  win.setFullScreen(true); // change window property -> redrawing

  // ...

}

I added this too:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	Thalinda Bandara
Solution 4
Solution 5

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]