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