electron: [v10.0.0] Failure of transparent in Linux

I was trying to get vscode transparency working without --disable-gpu and decided to try --use-gl=desktop and to my surprise it worked. I couldn’t get it to work on a smaller test project though and I didn’t have to patience to start debugging. Just decided to share this is it happens to help anyone!

And below are chrome://gpu from with and without --use-gl=desktop (may be of some use so might as well share them) With: https://gist.github.com/Xaryphon/8e881d7beccc88c2ba27fe3bdb271c38 Without: https://gist.github.com/Xaryphon/282f8ec13d291b626db95bec5d59a497

on the lines of @bundyo 's solution, something line this #15947 (comment) worked for me in Electron 11.2.3 on Ubuntu 18.04.

This will disable hardware acceleration and it is not ideal if the application you are trying to develop is rather heavy in content. Nobody wants laggy applications. This should be solved regardless of workarounds imo

After several tests between v9 and v10, it is found that:

v10.0.0-beta.4 correct. v10.0.0-beta.8 failed.

2021-7: Confirm following code works on

• Ubuntu 20.04.2LTS 64bit
• GNOME v3.36.8
• Window System X11
• GeForce GTX 1080Ti
• Nvidia Driver 455 (proprietary)
• Electron v13.1.4
• Node v14.16.1

Code:

const createWindow = () => {
    const mainWindow = new BrowserWindow({
      height: 800,
      width: 600,
      transparent: true
    });
    mainWindow.loadFile("index.html");
  };
  
if(process.platform === "linux") {
    app.commandLine.appendSwitch('use-gl','desktop');
    // app.disableHardwareAcceleration();
    app.on('ready', () => setTimeout(createWindow, 500))
 }
 else{
    app.on('ready', createWindow)
 }

Observations:

1. Just using app.on('ready', createWindow) won’t create a transparent window
2. Opening DevTools will disable window transparency
3. By uncommenting app.disableHardwareAcceleration();, I can reduce createWindow delay to about 20 (ms).
4. By commenting app.disableHardwareAcceleration();, I can reduce createWindow delay to about 120 (ms).
5. Following code are key to make a transparent window on Ubuntu
   1. transparent: true
   2. app.commandLine.appendSwitch('use-gl','desktop');
   3. app.on('ready', () => setTimeout(createWindow, 500))

I can confirm this workaround on Electron 12.0.8, Ubuntu 18.04, Nvidia Jetson TX2 (arm64) with apparently no performance issues. Excellent find! I suggest that this ticket could be closed and a note added to documentation.

As you said, it is a workaround. The best way to close this ticket would be to have Electron use this newfound flag automatically if a transparent window is created on Linux, without us even remotely thinking about having to use it on our own.

Did’nt fully finished this regression, but I was able to find this was between bump of chromium from 85.0.4168.1 (included) and bump of chromium 85.0.4178.4 (included)

Seems the only way to work around this is by stopping HW acceleration before the app is ready. Something in the lines of:

app.disableHardwareAcceleration();

app.on('ready', () => {
  setTimeout(() => {
    createWindow();
    autoUpdater.checkForUpdatesAndNotify();
    createMenu();
  }, 50);
});

_Originally posted by @andredezzy in https://github.com/electron/electron/issues/2170#issuecomment-736223269_

Just wanted to mention that NW.js had this problem/regression too , but recently they updated chromium to version 86.0.4240.75 and the transparency in linux now works correctly

@ckerr These are the screenshots from my test. (Linux-deepin v20)

10.1.3 We are using Node.js 12.16.3, Chromium 85.0.4183.121, and Electron 10.1.3.

10.0.0-beta.4 We are using Node.js 12.16.3, Chromium 85.0.4161.2, and Electron 10.0.0-beta.4.