electron: with initially hidden visibility doesn't render

In the repro case below, the webview is initially created with visibility: hidden. After a short delay, we switch to visibility: visible. The expected behaviour is that github.com is displayed in the webview regardless of the timeout duration.

Due to some regression in Electron 1.5.0, this results in the webview being permanently empty. Weirdly enough it works fine when using a short timeout (<20) on my macOS system.

How to reproduce

index.js:

'use strict';

const {app, BrowserWindow} = require('electron');
const path = require('path');

app.on('ready', () => {
  const win = new BrowserWindow({
    width: 500,
    height: 500,
    webPreferences: {
      nodeIntegration: true
    },
  });
  win.loadURL('file://' + path.join(__dirname, 'test.html'))
});

test.html:

<!DOCTYPE html>
<html>
<style>
html, body, webview {
  position: fixed;
  margin: 0;
  width: 100%;
  height: 100%;
}

.hidden {
  visibility: hidden;
}
</style>
<body>
<webview id="webview" class="hidden" src="https://github.com"></webview>
</body>
<script>
setTimeout(() => {
  const webview = document.getElementById('webview');
  webview.style.visibility = 'visible';
}, 5000);
</script>
</html>

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 3
Comments: 17 (13 by maintainers)

Commits related to this issue

Fixed visibility of webviews in macOS Read more: https://github.com/electron/electron/issues/8505 — committed to ramboxapp/community-edition by saenzramiro 7 years ago
workaround for electron/electron#8505 — committed to minbrowser/min by PalmerAL 7 years ago
fix/webview-visibility: Uses z-index to hide unfocussed tabs, instead of visibility: hidden. Electron issue reference: https://github.com/electron/electron/issues/8505 — committed to joshuef/sn_browser by joshuef 7 years ago
fix/webview-visibility: Uses z-index to hide unfocussed tabs, instead of visibility: hidden. Electron issue reference: https://github.com/electron/electron/issues/8505 — committed to joshuef/sn_browser by joshuef 7 years ago
fix/webview-visibility: Uses z-index to hide unfocussed tabs, instead of visibility: hidden. Electron issue reference: https://github.com/electron/electron/issues/8505 — committed to joshuef/sn_browser by joshuef 7 years ago
fix/webview-visibility: Uses z-index to hide unfocussed tabs, instead of visibility: hidden. Electron issue reference: https://github.com/electron/electron/issues/8505 — committed to joshuef/sn_browser by joshuef 7 years ago
fix/webview-visibility: Uses z-index to hide unfocussed tabs, instead of visibility: hidden. Electron issue reference: https://github.com/electron/electron/issues/8505 — committed to joshuef/sn_browser by joshuef 7 years ago
fix/webview-visibility: Uses z-index to hide unfocussed tabs, instead of visibility: hidden. Electron issue reference: https://github.com/electron/electron/issues/8505 — committed to joshuef/sn_browser by joshuef 7 years ago
Dependency updates [MAID-2097] (#113) * feat/update: build / login working with electron 1.7.5 * fix/webview-visibility: Uses z-index to hide unfocussed tabs, instead of visibility: hidden. Ele... — committed to maidsafe/sn_browser by joshuef 7 years ago
better workaround for electron/electron#8505 — committed to minbrowser/min by PalmerAL 6 years ago
Fixed visibility of webviews in macOS Read more: https://github.com/electron/electron/issues/8505 — committed to TheGoddessInari/hamsket by saenzramiro 7 years ago

Most upvoted comments

Given that 3.0.0 is now stable, and this issue appears to be fixed there, i’m going to go ahead and close this out.

codebytere on Sep 24, 2018

@guillaumearm Yeah, it seems to be broken for all the electron@2.x.x versions I’ve tried. Interestingly, it seems to be fixed on the newest beta, electron@3.0.0-beta.12.

Screenshot using @poiru’s test code: It works!

0kzh on Sep 13, 2018

I made a minimal repro for the issues we’re seeing in the Slack app. To summarize:

Relying on z-index for visibility can cause layered webviews to bleed into each other
If you switch webviews at just the right time, you can still get white screens

Repo is up at https://github.com/CharlieHess/webview-stack.

CharlieHess on Jun 16, 2017

Adding to the pile since my exp. is a little different than those posted so far.

Using a webview via a React wrapper

As above, the problem only manifests when I’m testing on MacOS, not win/linux.

I’m not using the visibility prop anywhere afaik (and not really many styles at all–just some flexbox layout stuff), so couldn’t trace this to anything specific. Worse still was the fact that webview only failed to show up about 60% of the time (and only when I disable cache in dev tools).

Eventually I realized there was probably some kind of race condition, and I narrowed it down (I hope) to my styles library, Aphrodite, which injects styles at load time.

I switched to regular react inline styles & now it seems to be working fine.

brandonmp on May 6, 2017

We worked around this by setting visibility: hidden after receiving the did-finish-load event for the webview. We use z-index to keep the webview invisible anyway and only use visiblity: hidden to make Chromium throttle background/invisible tabs/webviews without the flicker caused by e.g. display: none.

poiru on Mar 7, 2017