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 class="etabs-views"></div>
.flex-container {
    display: flex;
    const TabGroup = require('electron-tabs');
    let tabGroup = new TabGroup();
    let tab = tabGroup.addTab({
      title: "",
      src: "",
      visible: true
    let tab2 = tabGroup.addTab({
      title: "",
      src: "",
      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 and thought it may be correlated?

Issue Analytics

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

github_iconTop GitHub Comments

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 😛

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 ?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Under macOS 10.12 WebView does not… - Apple Developer
I have an app for the Mac where I use WebView (not WKWebView) and many of the other classes of the WebView set...
Read more >
WebView (OSX) not rendering in print panel preview
My app creates and prints a WebView. The output page is being assembled and printed properly, but I do not get a preview...
Read more >
Webpage of Webview not rendered on macos (compatibiliy ...
Hi, My webview works fine on each platform (android, web, ios, windows) but not on macos. The webview stays white with no content...
Read more >
WebView not working after running macdeployqt.
app, WebView does not. Both work fine when running within Qt Creator. The issue with the ArcGIS based app is only when deploying....
Read more >
web/HTML content is not rendered correctly in webview tag
This points to an error in rendering the webview tag that you have to use in a Chrome app for showing web content....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found