Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
192
rated 0 times [  193] [ 1]  / answers: 1 / hits: 17874  / 6 Years ago, thu, november 29, 2018, 12:00:00

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 :



enter



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


More From » electron

 Answers
115

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


[#53016] Sunday, November 25, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
janjadonb

Total Points: 4
Total Questions: 114
Total Answers: 118

Location: Mali
Member since Fri, Dec 3, 2021
3 Years ago
janjadonb questions
;