<ul dir="auto">
<li>Electron Version: v2.0.2</li>
<li>Operating System (Platform and Version): Linux</li>
<li>Last known working Electron version:</li>
</ul>
<p dir="auto"><strong>Expected Behavior</strong><br>
while using window's background property in electron API and CSS background property I should get a similar result.</p>
<p dir="auto"><strong>Actual behavior</strong><br>
I set the window's background property with color <code class="notranslate">#141414<span class="ml-1 d-inline-block border circle color-border-subtle" style="background-color: #141414; height: 8px; width: 8px;"></span></code> and also applied <code class="notranslate">#141414<span class="ml-1 d-inline-block border circle color-border-subtle" style="background-color: #141414; height: 8px; width: 8px;"></span></code> color to <code class="notranslate">html, body</code> tags with CSS but in the attached screenshot, the result isn't what I expect.</p>
<p dir="auto"><strong>Note:</strong> the top section is CSS colored and the bottom section is native chromium background color. Also, this problem will occur while using <a href="https://github.com/electron/electron/issues/12820#issuecomment-387798184" data-hovercard-type="issue" data-hovercard-url="/electron/electron/issues/12820/hovercard"><code class="notranslate">--disable-gpu</code></a>  flag and well my window is frameless and in Linux by selecting a text object or something else and dragging it to out electron will crash.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/11756815/43007060-85b71752-8c4c-11e8-9c36-886fd21b6dec.png"><img src="https://user-images.githubusercontent.com/11756815/43007060-85b71752-8c4c-11e8-9c36-886fd21b6dec.png" alt="screenshot from 2018-07-20 18-32-53" style="max-width: 100%;"></a></p>
<ul dir="auto">
<li>Electron version: 1.7.x</li>
<li>Operating system: macOS 10.12.5</li>
</ul>
<h3 dir="auto">Expected behavior</h3>
<p dir="auto">Setting a window <code class="notranslate">backgroundColor</code> should produce the same visual result as setting it via CSS.</p>
<h3 dir="auto">Actual behavior</h3>
<p dir="auto">There is a slight flicker from where the background color from CSS kicks in.</p>
<h3 dir="auto">How to reproduce</h3>
<ul dir="auto">
<li>create a window with background color: <code class="notranslate">new BrowserWindow({ width: 800, height: 600, backgroundColor: '#DDDDDD' })</code></li>
<li>in that window set the same background color via CSS: <code class="notranslate">&lt;body style="background-color: #DDDDDD;"&gt;</code></li>
<li><code class="notranslate">loadURL</code> of the window with a slight timeout to see the difference</li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="setTimeout(function () {
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }))
}, 2000);"><pre class="notranslate"><span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-k">function</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-s1">url</span><span class="pl-kos">.</span><span class="pl-en">format</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
        <span class="pl-c1">pathname</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">'index.html'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
        <span class="pl-c1">protocol</span>: <span class="pl-s">'file:'</span><span class="pl-kos">,</span>
        <span class="pl-c1">slashes</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-c1">2000</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">The following video shows the difference clearly:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/900690/26779427/9775cdb2-49e5-11e7-9ec3-b8dbfa600c7a.gif"><img src="https://cloud.githubusercontent.com/assets/900690/26779427/9775cdb2-49e5-11e7-9ec3-b8dbfa600c7a.gif" alt="panel-red" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto">Could it be that the window <code class="notranslate">backgroundColor</code> somehow uses a different color space compared to the renderer one via CSS?</p>