<ul dir="auto">
<li>Electron version: 1.7.8 - 6.0.0-beta.2</li>
<li>Operating system: Windows 7 / Windows 10</li>
</ul>
<h3 dir="auto">Preconditions</h3>
<ul dir="auto">
<li>Window is frameless</li>
<li>Window has own "-webkit-app-region: drag" element that is styled to change its color when hovered</li>
</ul>
<h3 dir="auto">Expected behavior</h3>
<ul dir="auto">
<li>Mouse is moved over "-webkit-app-region: drag" element</li>
<li>"-webkit-app-region: drag" element changes its color as styled</li>
</ul>
<h3 dir="auto">Actual behavior</h3>
<ul dir="auto">
<li>Mouse is moved over "-webkit-app-region: drag" element</li>
<li>"-webkit-app-region: drag" element remains visibly unchanged</li>
</ul>
<h3 dir="auto">How to reproduce</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="git clone -b webkit-app-region-drag-swallows-mouse-events-bug https://github.com/christian-judt/electron-quick-start.git
cd electron-quick-start
npm install
npm start"><pre class="notranslate"><code class="notranslate">git clone -b webkit-app-region-drag-swallows-mouse-events-bug https://github.com/christian-judt/electron-quick-start.git
cd electron-quick-start
npm install
npm start
</code></pre></div>
<h3 dir="auto">Maybe related issues</h3>
<ul dir="auto">
<li>mouseleave event isn't fired when moving the mouse outside the window (Windows) <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="41263692" data-permission-text="Title is private" data-url="https://github.com/electron/electron/issues/611" data-hovercard-type="issue" data-hovercard-url="/electron/electron/issues/611/hovercard" href="https://github.com/electron/electron/issues/611">#611</a></li>
<li>-webkit-app-region drag disables parts of UI and doesn't act like normal HTML <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="46716729" data-permission-text="Title is private" data-url="https://github.com/electron/electron/issues/741" data-hovercard-type="issue" data-hovercard-url="/electron/electron/issues/741/hovercard" href="https://github.com/electron/electron/issues/741">#741</a></li>
<li>-webkit-app-region: drag eats all click events <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="66329211" data-permission-text="Title is private" data-url="https://github.com/electron/electron/issues/1354" data-hovercard-type="issue" data-hovercard-url="/electron/electron/issues/1354/hovercard" href="https://github.com/electron/electron/issues/1354">#1354</a></li>
<li>App-region: drag on Windows 10, blocking events <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="175230046" data-permission-text="Title is private" data-url="https://github.com/electron/electron/issues/7107" data-hovercard-type="issue" data-hovercard-url="/electron/electron/issues/7107/hovercard" href="https://github.com/electron/electron/issues/7107">#7107</a></li>
</ul>
<h3 dir="auto">Preflight Checklist</h3>

<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have read the <a href="https://github.com/electron/electron/blob/master/CONTRIBUTING.md">Contributing Guidelines</a> for this project.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I agree to follow the <a href="https://github.com/electron/electron/blob/master/CODE_OF_CONDUCT.md">Code of Conduct</a> that this project adheres to.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the issue tracker for an issue that matches the one I want to file, without success.</li>
</ul>
<h3 dir="auto">Issue Details</h3>
<ul dir="auto">
<li><strong>Electron Version:</strong>
<ul dir="auto">
<li>v8.1.1</li>
</ul>
</li>
<li><strong>Operating System:</strong>
<ul dir="auto">
<li>macOS 10.15.3</li>
</ul>
</li>
<li><strong>Last Known Working Electron version:</strong>
<ul dir="auto">
<li>1.8.4</li>
</ul>
</li>
</ul>
<h3 dir="auto">Expected Behavior</h3>

<p dir="auto">The window should be draggable by clicking on elements styled with <code class="notranslate">-webkit-app-region: drag;</code>.</p>
<h3 dir="auto">Actual Behavior</h3>

<p dir="auto">The window does not move when clicking and dragging on elements styled with <code class="notranslate">-webkit-app-region: drag;</code>.</p>
<h3 dir="auto">To Reproduce</h3>

<p dir="auto">This bug can be reproduced very easily using the most minimal of examples.  See code below:</p>
<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="var {app, BrowserWindow} = require('electron');
var mainWindow = null;

app.whenReady().then( function() {
	mainWindow = new BrowserWindow({
		width: 800,
		height: 600
	});
	mainWindow.loadFile('index.html');
} );"><pre class="notranslate"><span class="pl-k">var</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">var</span> <span class="pl-s1">mainWindow</span> <span class="pl-c1">=</span> <span class="pl-c1">null</span><span class="pl-kos">;</span>

<span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">whenReady</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</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">mainWindow</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">800</span><span class="pl-kos">,</span>
		<span class="pl-c1">height</span>: <span class="pl-c1">600</span>
	<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
	<span class="pl-s1">mainWindow</span><span class="pl-kos">.</span><span class="pl-en">loadFile</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-kos">}</span> <span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>index.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 lang=&quot;en&quot;&gt;
	&lt;head&gt;
		&lt;meta charset=&quot;UTF-8&quot;&gt;
		&lt;title&gt;Hello World!&lt;/title&gt;
		&lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'&quot;&gt;
	&lt;/head&gt;
	&lt;body style=&quot;-webkit-app-region: drag; -webkit-user-select: none;&quot;&gt;
		&lt;h1&gt;Hello World!&lt;/h1&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-c1">lang</span>="<span class="pl-s">en</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">meta</span> <span class="pl-c1">http-equiv</span>="<span class="pl-s">Content-Security-Policy</span>" <span class="pl-c1">content</span>="<span class="pl-s">default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'</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-c1">style</span>="<span class="pl-s">-webkit-app-region: drag; -webkit-user-select: none;</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-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">Run this example and you will see the window cannot be dragged by clicking inside the content, even though the entire body is styled with <code class="notranslate">-webkit-app-region: drag;</code>.</p>



<h3 dir="auto">Screenshots</h3>

<p dir="auto">None needed.</p>
<h3 dir="auto">Additional Information</h3>

<p dir="auto">This bug is related to, but not a duplicate of, the following:</p>
<ul dir="auto">
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="542474404" data-permission-text="Title is private" data-url="https://github.com/electron/electron/issues/21621" data-hovercard-type="issue" data-hovercard-url="/electron/electron/issues/21621/hovercard" href="https://github.com/electron/electron/issues/21621">#21621</a> (talking about BrowserView specifically)</li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="573779817" data-permission-text="Title is private" data-url="https://github.com/electron/electron/issues/22474" data-hovercard-type="issue" data-hovercard-url="/electron/electron/issues/22474/hovercard" href="https://github.com/electron/electron/issues/22474">#22474</a> (says "cannot resize" but I think they mean move / drag)</li>
</ul>