Transparent window has white background window

[delvedor]

Hi, I've some issue with the transparent window, my code is:

win = new BrowserWindow({
  width: 100,
  height: 50,
  transparent: true,
  frame: false
});

On Mac I have not any kind of problem, on my Windows 7 Parallels virtual machine again no problem, but on another pc (not virtualized) with Windows 7 transparent windows doesn't work (I have a white background).

I haven't error logs from console.
In both Windows 7 machines I have DWM enabled and running (in fact, both are using aero).

[zcbenz]

This is usually related to hardware, can you open the chrome://gpu url on each machine and compare the results?

[delvedor]

Graphics Feature Status - exactly the same in mac, windows virtualized (via parallels) and windows pc.
Driver Bug Workarounds - the same in both windows machine, different in mac
Problems Detected - the same in both windows machine, different in mac
Version Information & Driver Information - similar but changes some parameters in every machine, like GPU0, Sanboxed, Driver version/vendor.

If you want I can provide you more accurate screenshots.

[zcbenz]

I think it is a bug of Chrome's rendering code, and it should be GPU/hardware related. I'm afraid we can not fix it on Electron's side.

[delvedor]

Ok, so your advice is to wait for the next versions of Chrome?

[delvedor]

I have an update, that's strange.

On the virtualized Windows, as you know is all ok, but on the pc if the window is at least 160x80 pixels, the transparent option works.

In my specific case, 100x50px is the standard size of my window, I increase the dimensions by 12x5px every time I click on my own button by using

win.setSize(x, y);

Recap:
dimension < 160x80px : white background
dimension >= 160x80px : transparent background

[ankitaggarwal011]

I can confirm this on my windows 7(x64) machine as well. When the transparent flag is set to true.
Just as @delvedor said, for,
dimension < 160x80px : white background
dimension >= 160x80px : transparent background

Update:
There is another possibly related issue that I came across while confirming this one. I have documented it at #2184.

I came across this recently as well, and I've fiddled with the height and width to try see what happens. Turns out that if both width and height values are smaller than 160, you will see the white screen, ie

159 x 159 = white screen

However if at least one value is >= 160 than it will be transparent, so

160 x 1 = transparent
1 x 160 = transparent

I tried to see if re-sizing the browser window programmatically might help, but it doesn't, although I did see that it adds the white background behind the window. If you are using a background of say rgba(0,0,0,0.2) you will see it will be discoloured because of the white window behind it

[frankhale]

This is most likely related to this issue: #861

[kevinmartin]

I'm on the latest Electron (v0.33.6) and on Yosemite. It works fully for me... I instantiate the window like so:

        const window = new BrowserWindow({
                width,
                height,
                'node-integration': true,
                frame: false,
                transparent: true
        });

        window.loadUrl(`http://localhost:8002${uri}`);
        window.openDevTools();

The only flaw I see is when I open Dev Tools, the background is white until I close it, then it becomes transparent.

[kevinmartin]

Just realized this seems to be an issue with Microsoft Windows