<ul dir="auto">
<li>Electron version: 1.6.1</li>
<li>Operating system: MacOS</li>
</ul>
<h3 dir="auto">Expected behavior</h3>
<p dir="auto">Show the page loaded by the webview;</p>
<h3 dir="auto">Actual behavior</h3>
<p dir="auto">the webview must reload the page to show its contents.</p>
<h3 dir="auto">How to reproduce</h3>
<p dir="auto">Setting CSS property visibility as hidden and then set visibility as visible on 'did stop loading' event does not show the webpage content. Just a blank page, although is possible to inspect the webview host contents. I'm setting this property adding and removing a class name in my webview tag. That was working on 1.4.15. Now it only does not work on Mac Os.</p>
<p dir="auto">Inspecting the webview I can see that the class was added and the property visibility is set as 'visible'.</p>

<p dir="auto">.webBrowser {<br>
position: relative;<br>
width: 100%;<br>
height: 100%;<br>
overflow: hidden;<br>
visibility: hidden;<br>
display: inline-flex;<br>
z-index: 1001;<br>
min-width: 450px;<br>
min-height: 420px;<br>
user-select: auto;<br>
}<br>
.webBrowser.loaded<br>
{<br>
visibility: visible;<br>
}</p>
<p dir="auto">In the repro case below, the webview is initially created with <code class="notranslate">visibility: hidden</code>. After a short delay, we switch to <code class="notranslate">visibility: visible</code>. The expected behaviour is that github.com is displayed in the webview regardless of the timeout duration.</p>
<p dir="auto">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 (&lt;20) on my macOS system.</p>
<h3 dir="auto">How to reproduce</h3>
<p dir="auto"><strong>index.js</strong>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="'use strict';

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

app.on('ready', () =&gt; {
  const win = new BrowserWindow({
    width: 500,
    height: 500,
    webPreferences: {
      nodeIntegration: true
    },
  });
  win.loadURL('file://' + path.join(__dirname, 'test.html'))
});"><pre class="notranslate"><span class="pl-s">'use strict'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-kos">{</span>app<span class="pl-kos">,</span> BrowserWindow<span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'electron'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">'ready'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">win</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">BrowserWindow</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">width</span>: <span class="pl-c1">500</span><span class="pl-kos">,</span>
    <span class="pl-c1">height</span>: <span class="pl-c1">500</span><span class="pl-kos">,</span>
    <span class="pl-c1">webPreferences</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">nodeIntegration</span>: <span class="pl-c1">true</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-s1">win</span><span class="pl-kos">.</span><span class="pl-en">loadURL</span><span class="pl-kos">(</span><span class="pl-s">'file://'</span> <span class="pl-c1">+</span> <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'test.html'</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>test.html</strong>:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;style&gt;
html, body, webview {
  position: fixed;
  margin: 0;
  width: 100%;
  height: 100%;
}

.hidden {
  visibility: hidden;
}
&lt;/style&gt;
&lt;body&gt;
&lt;webview id=&quot;webview&quot; class=&quot;hidden&quot; src=&quot;https://github.com&quot;&gt;&lt;/webview&gt;
&lt;/body&gt;
&lt;script&gt;
setTimeout(() =&gt; {
  const webview = document.getElementById('webview');
  webview.style.visibility = 'visible';
}, 5000);
&lt;/script&gt;
&lt;/html&gt;"><pre class="notranslate"><span class="pl-c1">&lt;!DOCTYPE html<span class="pl-kos">&gt;</span></span>
<span class="pl-kos">&lt;</span><span class="pl-ent">html</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
<span class="pl-ent">html</span><span class="pl-kos">,</span> <span class="pl-ent">body</span><span class="pl-kos">,</span> <span class="pl-ent">webview</span> {
  <span class="pl-c1">position</span><span class="pl-kos">:</span> fixed;
  <span class="pl-c1">margin</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>;
  <span class="pl-c1">width</span><span class="pl-kos">:</span> <span class="pl-c1">100<span class="pl-smi">%</span></span>;
  <span class="pl-c1">height</span><span class="pl-kos">:</span> <span class="pl-c1">100<span class="pl-smi">%</span></span>;
}

.<span class="pl-c1">hidden</span> {
  <span class="pl-c1">visibility</span><span class="pl-kos">:</span> hidden;
}
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">webview</span> <span class="pl-c1">id</span>="<span class="pl-s">webview</span>" <span class="pl-c1">class</span>="<span class="pl-s">hidden</span>" <span class="pl-c1">src</span>="<span class="pl-s">https://github.com</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">webview</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">webview</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'webview'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-s1">webview</span><span class="pl-kos">.</span><span class="pl-c1">style</span><span class="pl-kos">.</span><span class="pl-c1">visibility</span> <span class="pl-c1">=</span> <span class="pl-s">'visible'</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">5000</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">html</span><span class="pl-kos">&gt;</span></pre></div>