[Bug]: Cannot change webview background color anymore

[Akwd22]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Electron Version

14.0.1

What operating system are you using?

Windows

Operating System Version

10

What arch are you using?

x64

Last Known Working Electron version

13.4.0

Expected Behavior

When the property backgroundColor of the BrowserWindow is set with anything than white (eg. red), webviews contained in this BrowserWindow should have their background color set to the same color.
Same for transparency.

Actual Behavior

When the property backgroundColor of the BrowserWindow is set with anything than white (eg. red), webviews contained in this BrowserWindow have their background color stay white.
If transparency is applied on the BrowserWindow, webviews stay opaque.

Testcase Gist URL

No response

Additional Information

I made sure that the background was set to transparent in my CSS webview html page.

[hgouveia]

Same issue, seems to be related with #30993 and #31003

[ramanjitsingh-hub]

Hi a newbie can you guide me to solve this issue

[eelco]

+1 for this issue.

We’re experiencing it on macOS.

it seems to be introduced in 14, version 13.5.0 works as expected too. All later versions have this bug (tested up to 16 alpha 1)

Note that we don’t set any background color on windows/views, and before this bug that meant that the background color of the HTML loaded in the BrowserWindow would be shown.

[VerteDinde]

Thanks for reporting this and helping to make Electron better!

Would it be possible for you to make a standalone testcase with only the code necessary to reproduce the issue? For example, Electron Fiddle is a great tool for making small test cases and makes it easy to publish your test case to a gist that Electron maintainers can use.

Stand-alone test cases make fixing issues go more smoothly: it ensure everyone's looking at the same issue, it removes all unnecessary variables from the equation, and it can also provide the basis for automated regression tests.

I'm adding the blocked/need-repro label for this reason. After you make a test case, please link to it in a followup comment. Thanks so much!

[eelco]

@VerteDinde Wow, that’s a cool tool!

Here is a reproduction for this issue, I basically added one line (mainWindow.setBackgroundColor("red")) which works in 13.5.0 but does not work in the latest versions (sorry, did not do a full bisect): https://gist.github.com/80a2cc491e9c6320b703f98c5900137e

[miniak]

Is this the same issue as #31686? Can you check if #31722 fixes it?

[theolivenbaum]

Not sure if related, but on 15 and 16, calling setBackgroundColor on a transparent window with vibrancy enabled on macOS would disable the transparency and render a white background instead.

[codebytere]

hey @eelco - it's documented that backgroundColor must be a hex value:

electron/docs/api/browser-window.md

Lines 202 to 204 in e6b1d95

	* `backgroundColor` string (optional) - Window's background color as a hexadecimal value,
	like `#66CD00` or `#FFF` or `#80FFFFFF` (alpha in #AARRGGBB format is supported if
	`transparent` is set to `true`). Default is `#FFF` (white).

.

Tweaking your Fiddle to

mainWindow.setBackgroundColor("#ff0000")

works perfectly. It does look like passing CSS colors used to work, but then broke as a function of some refactoring we did. I can look into potentially restoring the old behavior, but given it went against documentation and how many of the other backgroundColor calls functioned it's not a guarantee.

[hgouveia]

just checked out with Electron 15.3.1 and 15.3.2 and transparent background is now working fine in the webview for me

[hovancik]

Same issue on all platforms. Right now doing to workaround:

• send background color from main to renderer
• set background color with javascript for document.body

[arsinclair]

This is something that started happening for me after I upgraded from 14.0.0 to 14.0.1. The culprit seems to be #30819, which states that backgroundColor option is now having an effect.

I don't know about everyone else, but for me it always worked, and upgrading to 14.0.1 actually breaks it. On 14.0.0 when an application starts it renders the correct background colour, and on 14.0.1 it starts with a white colour, and only after some time changes it to the desired colour.

I understand why does is happen from this comment #30759 (comment), however I don't see how as a consumer we can control that Blink setting.

How can this be fixed on a consumer side?

(I was trying to record a gif with actual behaviour, but oddly gif recorder shows the correct colour and not the white, however the white is seen on the screen)

[SudoVanilla]

I think this is fixed now in Electron 16, I'm now able to change background to transparent by inserting CSS and the webview no longer shows a white background behind it.
I tested this with Glasstron as well.

[codebytere]

Closed as fixed in v16