<webview> not rendering content after reload or redirect (Electron 5.x, 6.x)

[Catlinz]

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 an issue that matches the one I want to file, without success.

Issue Details

• Electron Version:
  • 5.x & 6.0.0-beta.1
• Operating System:
  • Windows 10 (1803)
• Last Known Working Electron version::
  • 4.x

Expected Behavior

When creating a webview with src="http://mail.google.com", I expect it to load and show the google login page. When reloading the webview (or if the webview redirects e.g., when logging in) I expect it to also properly render the page.

Actual Behavior

Sometimes when loading the above URL, nothing is visible. Always when reloading the webview with the above URL, the webview will no longer render the page. E.g., signing into things like gmail, isn't really working because it signs you in, but you end up with a non-rendering webview.

To Reproduce

Replace the renderer process script in electron quickstart / electron fiddle with the following, and click the refresh button (with webviewTag: true in webPreferences).

document.addEventListener('DOMContentLoaded', () => {
    const wv = document.createElement('webview');
    wv.src = 'https://mail.google.com';
    wv.style.height = '400px';

    const a = document.createElement('a');
    a.innerText = 'REFRESH';
    a.addEventListener('click', () => wv.reload());

    document.body.append(wv, a);
});

Screenshots

What it renders (usually) when first loaded (and what should be rendered):

What renders after the "REFRESH" button is clicked:

Additional Information

The webview (and iframe within it) still have their proper sizes. The page within the webview is actually loading correctly, if you inspect it you can see all the page is there.

If you change CSS properties in the dev tools that cause the webview to be re-rendered, the page then renders correctly. (e.g., after reloading and getting the blank page, if you toggle the display: flex; CSS property on the webview, the page will render. Just resizing the window that the webview is in does not cause the page to render.

It seems to be affecting all Electron versions from 5.0.0-beta.1 and onward.

[4eveRS]

Found the same behavior on my application. Looking for a fix.

Update
Noticed that also it affects other functionalities as going fullscreen on a video.

Reproduction
Access a twitch.tv page, set the video player to fullscreen, notice a huge delay / sometimes stuck trying to enter/leave fullscreen. If you change the webview css in order to re-render it work as intended.

[littlecold233]

same problem. Looking for a fix

[littlecold233]

It doesn't work on MacOS either

[shockthetoast]

We just updated to 5.0.1 and our webview no longer renders, either. However, adjusting css doesn't seem to restore it for us. Additionally, the webview's "dom-ready" event never fires.

[javan]

I'm seeing this issue too (on macOS), and I believe it's specific to <webview>s containing <iframe>s. Possibly related: #17890, #18019.

[codebytere]

@javan are you seeing this with the above repro on 5 and 6? i'm not able to reproduce it with the above on macOS.

[javan]

@codebytere, I haven't tried the above repro, but the issue happening in our (Basecamp) app and preventing us from upgrading to Electron v5.

I managed to narrow down reproduction steps to a fairly minimal test case. I suspect the problem occurs when dynamically created <iframe>s are added and/or removed from the DOM (Basecamp does this to show embedded URLs like tweets, youtube videos, etc.).

To reproduce, run: https://github.com/javan/electron-quick-start/tree/webview-iframe-bug

1. $ git clone https://github.com/javan/electron-quick-start.git -b webview-iframe-bug
2. $ npm install
3. $ npm start
4. Click the "Embed 1" button
5. Click the "Embed 2" button
6. Click the "Embed 1" button again

At this point, the <webview> seems to freeze. The dynamically inserted content doesn't appear and the button stays highlighted. Also, the app stops responding to keyboard commands like ⌘+W and ⌘+Q.

Demo

[javan]

Note: The above example doesn't reload or redirect the <webview> (like the title of this issue mentions). It's a single page that adds and removes <iframe>s from the DOM.

[Catlinz]

So, I just did some checking, and this issue appears to have been fixed in v6.0.0-beta.2. Not entirely sure what fixed it, but I don't seem to be getting the original issue when running the code on Electron Fiddle.

[gapsong]

@Catlinz could you please close this issue, if it has been fixed already?