<ul dir="auto">
<li>Electron Version: 2.0.2</li>
<li>Operating System (Platform and Version): macOS 10.13.4</li>
<li>Last known working Electron version: 1.7.12</li>
</ul>
<p dir="auto">This has been noticed when trying to upgrade VS Code to Electron 2.0.2 in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="333258546" data-permission-text="Title is private" data-url="https://github.com/microsoft/vscode/issues/52196" data-hovercard-type="issue" data-hovercard-url="/microsoft/vscode/issues/52196/hovercard" href="https://github.com/microsoft/vscode/issues/52196">microsoft/vscode#52196</a></p>
<p dir="auto"><strong>Expected Behavior</strong><br>
Characters with opacity in a monospace font should be rendered without duplication (in the next whitespace).</p>
<p dir="auto"><strong>Actual behavior</strong><br>
Characters with opacity in a monospace font are rendered doubled when followed by whitespace.</p>
<p dir="auto"><strong>To Reproduce</strong><br>
Using <a href="https://github.com/electron/fiddle">https://github.com/electron/fiddle</a> , here is the HTML code needed to reproduce in the renderer:</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;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Hello World!&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;

&lt;style&gt;
  .squiggly-inline-unnecessary {
  opacity: 0.6;
}
.view-line {
  font-family: &quot;Monaco&quot;;
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0px;
}
&lt;/style&gt;

&lt;div style=&quot;top:21px;height:21px;&quot; class=&quot;view-line&quot;&gt;&lt;span&gt;
&lt;span class=&quot;mtk1&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;
&lt;span class=&quot;mtk5 squiggly-inline-unnecessary&quot;&gt;const&lt;/span&gt;
&lt;span class=&quot;mtk1 squiggly-inline-unnecessary&quot;&gt;&amp;nbsp;&lt;/span&gt;
&lt;span class=&quot;mtk13 squiggly-inline-unnecessary&quot;&gt;a&lt;/span&gt;
&lt;span class=&quot;mtk1 squiggly-inline-unnecessary&quot;&gt;&amp;nbsp;&lt;/span&gt;
&lt;span class=&quot;mtk17 squiggly-inline-unnecessary&quot;&gt;=&lt;/span&gt;
&lt;span class=&quot;mtk1 squiggly-inline-unnecessary&quot;&gt;&amp;nbsp;&lt;/span&gt;
&lt;span class=&quot;mtk9 squiggly-inline-unnecessary&quot;&gt;`hdshhdasha;&lt;/span&gt;
&lt;/span&gt;&lt;/div&gt;

    &lt;h1&gt;Hello World!&lt;/h1&gt;
    &lt;!-- All of the Node.js APIs are available in this renderer process. --&gt;
    We are using Node.js &lt;script&gt;document.write(process.versions.node)&lt;/script&gt;,
    Chromium &lt;script&gt;document.write(process.versions.chrome)&lt;/script&gt;,
    and Electron &lt;script&gt;document.write(process.versions.electron)&lt;/script&gt;.

    &lt;script&gt;
      // You can also require other files to run in this process
      require('./renderer.js')
    &lt;/script&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">meta</span> <span class="pl-c1">charset</span>="<span class="pl-s">UTF-8</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">title</span><span class="pl-kos">&gt;</span>Hello World!<span class="pl-kos">&lt;/</span><span class="pl-ent">title</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">style</span><span class="pl-kos">&gt;</span>
  .<span class="pl-c1">squiggly-inline-unnecessary</span> {
  <span class="pl-c1">opacity</span><span class="pl-kos">:</span> <span class="pl-c1">0.6</span>;
}
.<span class="pl-c1">view-line</span> {
  <span class="pl-c1">font-family</span><span class="pl-kos">:</span> <span class="pl-s">"Monaco"</span>;
    <span class="pl-c1">font-weight</span><span class="pl-kos">:</span> normal;
    <span class="pl-c1">font-size</span><span class="pl-kos">:</span> <span class="pl-c1">14<span class="pl-smi">px</span></span>;
    <span class="pl-c1">line-height</span><span class="pl-kos">:</span> <span class="pl-c1">21<span class="pl-smi">px</span></span>;
    <span class="pl-c1">letter-spacing</span><span class="pl-kos">:</span> <span class="pl-c1">0<span class="pl-smi">px</span></span>;
}
<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">div</span> <span class="pl-c1">style</span>="<span class="pl-s">top:21px;height:21px;</span>" <span class="pl-c1">class</span>="<span class="pl-s">view-line</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">mtk1</span>"<span class="pl-kos">&gt;</span>&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">mtk5 squiggly-inline-unnecessary</span>"<span class="pl-kos">&gt;</span>const<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">mtk1 squiggly-inline-unnecessary</span>"<span class="pl-kos">&gt;</span>&amp;nbsp;<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">mtk13 squiggly-inline-unnecessary</span>"<span class="pl-kos">&gt;</span>a<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">mtk1 squiggly-inline-unnecessary</span>"<span class="pl-kos">&gt;</span>&amp;nbsp;<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">mtk17 squiggly-inline-unnecessary</span>"<span class="pl-kos">&gt;</span>=<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">mtk1 squiggly-inline-unnecessary</span>"<span class="pl-kos">&gt;</span>&amp;nbsp;<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">mtk9 squiggly-inline-unnecessary</span>"<span class="pl-kos">&gt;</span>`hdshhdasha;<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>

    <span class="pl-kos">&lt;</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>Hello World!<span class="pl-kos">&lt;/</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>
    <span class="pl-c">&lt;!-- All of the Node.js APIs are available in this renderer process. --&gt;</span>
    We are using Node.js <span class="pl-kos">&lt;</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">write</span><span class="pl-kos">(</span><span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">versions</span><span class="pl-kos">.</span><span class="pl-c1">node</span><span class="pl-kos">)</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>,
    Chromium <span class="pl-kos">&lt;</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">write</span><span class="pl-kos">(</span><span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">versions</span><span class="pl-kos">.</span><span class="pl-c1">chrome</span><span class="pl-kos">)</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>,
    and Electron <span class="pl-kos">&lt;</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">write</span><span class="pl-kos">(</span><span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">versions</span><span class="pl-kos">.</span><span class="pl-c1">electron</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">script</span><span class="pl-kos">&gt;</span>
      <span class="pl-c">// You can also require other files to run in this process</span>
      <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./renderer.js'</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">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">The above should render the text:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    const a = `hdshhdasha;"><pre class="notranslate"><code class="notranslate">    const a = `hdshhdasha;
</code></pre></div>
<p dir="auto"><strong>Screenshots</strong></p>
<p dir="auto">Notice how <code class="notranslate">a</code> and <code class="notranslate">=</code> are doubled:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/9205389/41726379-4994972c-7572-11e8-9063-cda99f13d350.png"><img src="https://user-images.githubusercontent.com/9205389/41726379-4994972c-7572-11e8-9063-cda99f13d350.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Additional Information</strong><br>
This does not reproduce when running with <code class="notranslate">--disable-gpu</code>.<br>
This does not reproduce when removing the opacity.<br>
This does not reproduce when using two <code class="notranslate">&amp;nbsp;</code>s in a <code class="notranslate">&lt;span&gt;</code>.<br>
This does not reproduce on Chrome 67.<br>
This does not reproduce on all macOS machines we have tried, but it reproduces on some Windows machines.<br>
fyi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bpasero/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bpasero">@bpasero</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/chrmarti/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/chrmarti">@chrmarti</a></p>
<ul dir="auto">
<li>Electron version: 1.7.6</li>
<li>Operating system: Windows 10</li>
</ul>
<h3 dir="auto">Expected behavior</h3>
<p dir="auto">Every time some the user clicks a button that downloads a file in the browser the event "will-download" should be fired.</p>
<h3 dir="auto">Actual behavior</h3>
<p dir="auto">Behavior 1. The event "will-download" is fired only for the first time some file is downloaded from the browser. If I click again to download a file the event is not fired anymore.</p>
<p dir="auto">Behavior 2. If I close and open the browser again (even without ending the application) the event if fired more than once (two, three, fore times) when I click in a button for download.</p>
<h3 dir="auto">How to reproduce</h3>
<p dir="auto">I have this code in my project where I open a window in which the user can search and download some stuff:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="let myBrowser = new BrowserWindow({ width: 1300, height: 1000, webPreferences: { nodeIntegration: false } })
myBrowser.setMenu(null)
myBrowser.loadURL('http://localhost/myurl.html')
var ses = myBrowser.webContents.session
ses.on('will-download', (event, item, webContents) =&gt; {
	var fileName = item.getFilename()
	var url = item.getURL()
	item.setSavePath(store.get('myFolder') + '/' + fileName)
	//DO SOME STUFF WITH THE FILE NAME
})"><pre class="notranslate"><code class="notranslate">let myBrowser = new BrowserWindow({ width: 1300, height: 1000, webPreferences: { nodeIntegration: false } })
myBrowser.setMenu(null)
myBrowser.loadURL('http://localhost/myurl.html')
var ses = myBrowser.webContents.session
ses.on('will-download', (event, item, webContents) =&gt; {
	var fileName = item.getFilename()
	var url = item.getURL()
	item.setSavePath(store.get('myFolder') + '/' + fileName)
	//DO SOME STUFF WITH THE FILE NAME
})
</code></pre></div>
<p dir="auto">I don't prevent the download from beeing downloaded because all of what I need to do is save in a document the name and url of the file, and set the path to save the file.</p>