<ul dir="auto">
<li>Electron Version: 2.0.7 and 3.0.0-beta5</li>
<li>Operating System (Platform and Version): Windows7 7601</li>
<li>Last known working Electron version: 3.0.0-beta5</li>
</ul>
<p dir="auto"><strong>Expected Behavior</strong><br>
Render behavior of electron is the same as chrome.</p>
<p dir="auto"><strong>Actual behavior</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/9638801/44139810-c1ef704e-a0aa-11e8-9017-227ce675c773.png"><img src="https://user-images.githubusercontent.com/9638801/44139810-c1ef704e-a0aa-11e8-9017-227ce675c773.png" alt="capture" style="max-width: 100%;"></a><br>
left: chrome    right: electron-3.0.0-beta5 + electron-vue<br>
Electron is more blur than chrome.</p>
<ul dir="auto">
<li>Electron version: 1.7.4, 1.6.11</li>
<li>Operating system: Windows 10</li>
</ul>
<h3 dir="auto">Expected behavior</h3>
<p dir="auto">Default background color is #FFF as described in the documentation. And texts don't have grayscale anti-aliasing.<br>
( <code class="notranslate">&lt;webview&gt;</code> also should have #FFF background (NOT CSS background) by default.)</p>
<h3 dir="auto">Actual behavior</h3>
<p dir="auto">BrowserWindow shows different rendering when using <code class="notranslate">backgroundColor: '#FFF'</code> in the constructor.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1412057/28245466-57ee60b4-6a42-11e7-9d34-30c59ebbf4f2.png"><img src="https://user-images.githubusercontent.com/1412057/28245466-57ee60b4-6a42-11e7-9d34-30c59ebbf4f2.png" alt="antialiasing_vs_backgroundcolor" style="max-width: 100%;"></a></p>
<h3 dir="auto">How to reproduce</h3>
<ol dir="auto">
<li>Use <code class="notranslate">backgroundColor</code> in BrowserWindow constructor.</li>
<li>Load a html.</li>
</ol>
<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;head&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p&gt;Electron&lt;/p&gt;
&lt;/body&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">head</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">head</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">p</span><span class="pl-kos">&gt;</span>Electron<span class="pl-kos">&lt;/</span><span class="pl-ent">p</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">html</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">As far as reading <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="163699397" data-permission-text="Title is private" data-url="https://github.com/electron/electron/issues/6344" data-hovercard-type="issue" data-hovercard-url="/electron/electron/issues/6344/hovercard" href="https://github.com/electron/electron/issues/6344">#6344</a>, the window doesn't have background color when not specifying <code class="notranslate">backgroundColor</code>. This might cause other anti-aliasing/blurry-text issues like <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="208462897" data-permission-text="Title is private" data-url="https://github.com/electron/electron/issues/8708" data-hovercard-type="issue" data-hovercard-url="/electron/electron/issues/8708/hovercard" href="https://github.com/electron/electron/issues/8708">#8708</a>. When I set <code class="notranslate">backgroundColor</code>, I got good anti-aliasing as well as Chrome.</p>
<p dir="auto">And due to this anti-aliasing behavior, <code class="notranslate">&lt;webview&gt;</code> also should have #FFF background (NOT CSS background) by default.</p>
<h3 dir="auto">Possible fixes</h3>
<p dir="auto">I think the problem is that there are two ways to set background color.</p>
<ul dir="auto">
<li><a href="https://github.com/electron/electron/blob/v1.7.4/atom/browser/native_window.cc#L188-L194">https://github.com/electron/electron/blob/v1.7.4/atom/browser/native_window.cc#L188-L194</a></li>
<li><a href="https://github.com/electron/electron/blob/v1.7.4/atom/browser/api/atom_api_window.cc#L87-L93">https://github.com/electron/electron/blob/v1.7.4/atom/browser/api/atom_api_window.cc#L87-L93</a></li>
</ul>
<p dir="auto"><code class="notranslate">native_window.cc</code> tries to set #FFF by using <code class="notranslate">SetBackgroundColor()</code>, but its implementation is different from <code class="notranslate">atom_api_window.cc</code>.<br>
And  <code class="notranslate">atom_api_window.cc</code> doesn't set #FFF when <code class="notranslate">backgroundColor</code> doesn't exist, so the background is not set to #FFF.</p>
<p dir="auto">Unfortunately I could not imagine a consist way to resolve this.</p>