Stacked WebView transparencies


#1

I’m using electron to develop an application and I’m using WebViews to include 4rd party content.
The layout of the webviews is such that on portion of one webview covers the other, I want for the covered webview to show through the cover webview, on both webviews, including the actual webview container I’ve added the property background-color: transparent on the webview tag and on the <html> and <body> tags of the webviews loaded content to no avail, is this a feature supported by the webview tag?


#2

For <iframe>s you can add a allowtransparency attribute to the tag to make its background transparent. Maybe the same applies to <webview>?


#3

I’ve just tried what you said, unfortunately it did not work. But thanks anyways!


#4

Just dug into the Electron source code, and it seems like the allowtransparency attribute should work. At least the attribute is defined on the WebView class… Could you share the code you’re using, specifically the part with the <webview> tag?


#5

I’m using the following tag <webview tabindex="-1" id="login" allowtransparency="allowtransparency" nodeintegration="nodeintegration" height="124" width="676" class="block" src="..."></webview>

I think that the actual webview might be transparent but the underlying <object> tag that loads the content is not, the object tag exists on the shadow root of the webview.

Not sure how the object tag can be be set to transparent after creation or if it can be modified before it is created.


#6

I don’t think you need to specify a value for allowtransparency. <webview allowtransparency> should do the trick, so you could try removing the value assignment. I doubt this will fix your issue, though.

You can probably test this by clicking on the <object> in the devtools “elements” tab, then set background-color: transparent; in the right side of the window. Otherwise you can try with CSS webview::shadow object { background-color: transparent; } (note, however, that the ::shadow selector is (will be?) deprecated, and so it shouldn’t be used; you can still do this in javascript with element.shadowRoot.querySelector(...).style = ...). If none of the above work, I would suggest you open an issue on the Electron repository to ask the maintainers.


#7

Hello, just tried setting the allowtransparency attribute to not have a value and it did not work, I also tried setting the object tag background to be transparent using the css webview::shadow object { ... } rule and also using JS to set the style; it did not work, however investigating a bit it seems that the <object> bg cannot be changed after it has been added to the DOM (based on this SO question http://stackoverflow.com/questions/4150964/object-tag-to-transparent-mode) so my last attempt would be to add the <param name="wmode" value="transparent" /> elem to the object tag before it is added to the DOM, looking in the source code, it seems that the object tag is created in this method : https://github.com/atom/electron/blob/master/atom/renderer/lib/web-view/web-view.coffee#L198 I’ll see if I can add the <param> tag before it is added to the DOM.