electron: BrowserView background loses alpha transparency (intermittent)

Output of node_modules/.bin/electron --version: v3.0.13
Operating System (Platform and Version): Ubuntu Linux (X11), mac OS (most recent versions)

Expected Behavior Contents should be always be visible behind a BrowserView with a partially transparent background color.

Actual behavior Occasionally, when showing a BrowserView, the transparency will be lost and the BrowserView’s background will be opaque. Destroying and recreating the BrowserView restores the proper alpha.

To Reproduce *Create a BrowserView, use setBackgroundColor() with a partially transparent color.
Repeat until the issue occurs:

Set the bounds of the BrowserView to the area of the window below and show it.
Hide the BrowserView

I’ll try and create a repo for reproducing this more easily. Just wanted to post it first and see if this is a known problem.

About this issue

Original URL
State: open
Created 6 years ago
Comments: 31 (9 by maintainers)

Commits related to this issue

Test app for Electron issue #16212 The issue is that a transparent `BrowserView` stops being transparent once the page is reloaded. You can test it by running: * `npm install` * `npm start` * reload... — committed to Timothee/electron-16212 by Timothee 5 years ago

Most upvoted comments

Closing devtools on a BrowserView seems to reliably trigger transparency loss. Opening devtools is fine, but closing breaks it. Reopening devtools, or removing-readding browserview to the parent window, does not help.

Tested on v11.0.1.

ChALkeR on Nov 19, 2020

After upgrading from Electron 13 to Electron 15.3.0, it seems like the transparency loss is permanent, at least on Linux.

Add transparent: true to webPreferences too, not just to the window options to make transparency work. That seems to be an undocumented API change from https://github.com/electron/electron/pull/30777/files#diff-261075c0abf5bfd33be70313bcd3699da9b1222b6f27df0e8294fc63789f160bR1389-R1391

i.e. try this:

{
    webPreferences: {
      backgroundColor: '#00000000',
      transparent: true,
    },
    transparent: true,
}

ChALkeR on Nov 6, 2021

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, “bump”), and we’ll keep it open. If you have any new additional information—in particular, if this is still reproducible in the latest version of Electron or in the beta—please include it with your comment!

github-actions[bot] on Jun 6, 2023

github-actions[bot] on Oct 8, 2022

I try to set transparent: true and backgroundColor: '#00FFFFFF'，the alpha is always available in my Mac. If only set transparent: true, the alpha is unavailable after reload.

miaowing on May 31, 2019

Thanks, @Timothee! I was at a loss as to why the demo app I made to try to repro the issue never produced the same behavior I was seeing in my production app.

I guess I didn’t realize that a reload was occurring in my prod BrowserView.

krisdages on May 25, 2019

It seems to affect not just reloading the page, but interacting with window.location. E.g., running window.location = window.location.href in the console triggers the issue.

Timothee on May 23, 2019