Transparent windows leave a shadow behind when animated

[davej]

This is best explained with a video: https://www.dropbox.com/s/yy3cmc82p55sh07/electron-transparent-window-animated.mov?dl=0

As you can see in the video, there is a semi-opaque version of the un-animated window left behind when animated.

This is the window creation code:

const bounds = mb.tray.getBounds();

const win = new BrowserWindow({
  width: 200,
  height: 200,
  transparent: true,
  alwaysOnTop: true,
  frame: false,
  x: bounds.x - 100,
  y: bounds.y + 5,
  titleBarStyle: 'hidden',
  show: false,
  resizable: false,
});
win.loadURL(url);
win.on('ready-to-show', () => win.show());

The HTML is available here: http://codepen.io/anon/pen/VpKBgv

• Electron version: 1.4.15
• Operating system: MacOS Sierra 10.12.3

[MarshallOfSound]

@davej Can you test this on 1.6.x I seem to recall someone mentioning this was better in that new version

[davej]

@MarshallOfSound Just tested now. It's still an issue in 1.6.1.

[pronebird]

I am not sure why you get like a ghost behind, but window shadow is rendered once on show. Turn it off if you don't want it. You could create larger window and use box-shadow or SVG inside of browser to render your own shadow around custom shape.

BrowserWindow({ hasShadow: false });

[davej]

@pronebird ah ok, that fixes it. I guess this issue can be closed now. Closing.

[JeroenSormani]

I was having the same behaviour, kinda weird and hard to figure out what the cause is. In my situation I had a window that is constantly showing/hiding and showing a 'imprint' of the old state. When its showing the imprint and opening>focussing on dev tools its all the sudden gone.

I created a sample to figure out what is happening and really shows the difference. https://cl.ly/1n3l1d2p380h (this example I'm doing a couple show() / hide()'s and move the content around to show the imprints differ when a window's visibility changes.

One window in there has the default shadow, and the other has hasShadow: false turned off. Guess turning off the shadow is the way to go for a transparent window, but maybe there's a different solution available (refreshing the shadow?)

or maybe its a good idea to add a note to the docs if thats the right place?

The code to test: https://gist.github.com/JeroenSormani/be238d972ccb2ff0b1b967a43ad511ba

[oltreseba]

This is still happening in electron 9. I don't think removing the shadow should be an acceptable solution, as shadows are supposed to be there for most types of windows to make windows stack clear to the user.

[Nantris]

Issue also persists on Windows without animation or anything except simply hiding the window. https://github.com/electron/electron/issues/17713

[TomasHubelbauer]

Thanks for reporting this! This problem is still alive and well. In my case the hasShadow: false fix is applicable in my case, but it would still be great to get a proper solution. I think this ticket should be reopened. I wonder if this is an underlying Chromium issue and not an Electron issue.

[Nantris]

@TomasHubelbauer what OS are you seeing this on? I haven't seen it in two years on Windows 11, and we were about to remove the workaround from our app, but now I wonder if I'm being too hasty.

[TomasHubelbauer]

Sorry, should have specified! This is happening for me on macOS, currently on Sonoma, but it was a thing on the previous version as well (whatever it was called), because it has been a while since I added my first workaround which was incessant web content window reloads which I have now replaced with the hasShadow: false trick.