Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webviews not rendering on OSX

See original GitHub issue

I have the following code:

<div class="flex-container">
	<div class="etabs-tabgroup
		<div class="etabs-tabs"></div>
		<div class="etabs-buttons"></div>
	</div>
	<div class="etabs-views"></div>
</div>

.flex-container {
    display: flex;
}

    const TabGroup = require('electron-tabs');
    
    let tabGroup = new TabGroup();
    let tab = tabGroup.addTab({
      title: "my@email.com",
      src: "https://mail.protonmail.com/login",
      visible: true
    });
    tab.activate();
    let tab2 = tabGroup.addTab({
      title: "my.second@email.com",
      src: "https://mail.protonmail.com/login",
      visible: true
    });

When does it not render:

With the code above.
If I create a custom webview inside the flex-container, none of the webviews will ender.
With both of the following but also remove all electron-tabs appended stylesheets.

When does it render:

If I, in the developer tools, move the webview outside the etabs-views div it’ll start loading and when I move it back it displays correctly.
If I create a custom webview inside the flex-container and remove the electron-tabs module.
If I just create a webview outside the flex-container, then all webviews (and all the tabs) will load correctly.

electron 1.6.6 electron-tabs 0.6.0 OS: Mac OS 10.12.4

I found the following https://github.com/electron/electron/issues/8505 and thought it may be correlated?

Issue Analytics

State:
Created 6 years ago
Comments:15 (11 by maintainers)

Top GitHub Comments

1reaction

mike-mccormickcommented, Oct 14, 2017

Toying with this,

If I drop line 11 from index.js entirely ( visibility: hidden;) it seems to resolve the issue for me.

@avatar21 or @kontrollanten ontrollanten - what do you guys get trying this?

Just so we’re on the same page, line 7-23 for me are currently:

// Inject styles
(function () {
    const styles = `
        webview {
            width: 0px;
            height: 0px;
        }
        webview.visible {
            visibility: visible;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    `;

Edit: Just for the record, I’m very much at the ‘playing with’ stage as far as electron’s concerned, please don’t assume I know what I’m talking about 😛

1reaction

kontrollantencommented, Sep 15, 2017

I’m sorry @brrd The sample was deleted upon my yearly cleanup. I’ll see if I can get another sample back up again. @avatar21 Can you publish a sample where it’s not working? And then try with the latest update from @brrd ?