<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>Electron 9.3.3 (for VSCode 1.51.1)</li>
</ul>
</li>
<li><strong>Operating System:</strong>
<ul dir="auto">
<li>Windows_NT x64 10.0.19042</li>
</ul>
</li>
<li><strong>Last Known Working Electron version:</strong>
<ul dir="auto">
<li>unknown</li>
</ul>
</li>
</ul>
<h3 dir="auto">Expected Behavior</h3>
<p dir="auto">When I open a dialog box like Save, SaveAs or Open, I expect it to be scaled according to the DPI setting of the monitor the dialog box was opened on.</p>
<h3 dir="auto">Actual Behavior</h3>
<p dir="auto">I have two monitors, primary display: 3840 x 2160 @ 225% scaling and a secondary display 2560x1440 @ 100% scaling. When I use my Electron app (VSCode in this case), the main window of the application is scaled to the right size (and displayed crisp and clear). The dialog boxes are scaled correctly on the 225% scaled monitor, but on the 100% scaled monitor, the dialog boxes are rendered way too big. As if they were drawn with the 225% scale which applies to the other monitor. The same goes for the context menu of the title bar, it is drawn too big on the 100% monitor.</p>
<h3 dir="auto">To Reproduce</h3>
<p dir="auto">Have your primary display set to 225% scaling, and a secondary display to 100%. Open an Electron app (VSCode, MSTeams), and right-click the title of the window. The context menu will be drawn in the scale of the primary display, whether its parent is on the primary or on the secondary display.</p>



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

<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/26464885/99878238-4f7cc380-2c04-11eb-8f7d-a60fa6d392aa.png"><img src="https://user-images.githubusercontent.com/26464885/99878238-4f7cc380-2c04-11eb-8f7d-a60fa6d392aa.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/26464885/99878254-6a4f3800-2c04-11eb-9437-fc48e39d8c1c.png"><img src="https://user-images.githubusercontent.com/26464885/99878254-6a4f3800-2c04-11eb-9437-fc48e39d8c1c.png" alt="image" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/26464885/99878268-7d620800-2c04-11eb-882b-b1f393da8594.png"><img src="https://user-images.githubusercontent.com/26464885/99878268-7d620800-2c04-11eb-882b-b1f393da8594.png" alt="image" style="max-width: 100%;"></a></p>
<h3 dir="auto">Additional Information</h3>
<ul dir="auto">
<li>Electron version: 3.1.0</li>
<li>Operating System (Platform and Version): Windows 10 Enterprise, 1803</li>
</ul>
<p dir="auto">When having a setup of two (or more) displays with mismatching "scaling" factors, calling <code class="notranslate">BrowserWindow.setBounds()</code> with a position that is on the other display, results in both the new position and the size of the window being based on the "scaling" factor of the display where the window was at before invoking the method.</p>
<h3 dir="auto">Expected behavior</h3>
<p dir="auto">When a BrowserWindow is positioned on a <strong>display, different from the primary display (regardless of the "scaling" factor)</strong>, using <code class="notranslate">BrowserWindow.setPosition(0, 0)</code> would position the window at the <em>top left corner of the primary display</em></p>
<p dir="auto">Furthermore, for two sequential calls, e.g. of <code class="notranslate">BrowserWindow.setBounds({ x: 0, y: 0, width: 100, height: 100) })</code>, the latter call should affect neither the position nor the size of the window</p>
<h3 dir="auto">Actual behavior</h3>
<p dir="auto">Using <code class="notranslate">setPosition(0, 0)</code> doesn't position the window at the top left corner on the primary display but at some different place instead. It might even be the case that it is not positioned <strong>on the primary display</strong> at all but somewhere off screen instead, e.g. <code class="notranslate">{x: -222, y: -103}</code> (this was reported by the <code class="notranslate">getPosition()</code> method of the window after the window repositioning had took place).</p>
<p dir="auto">Similar behaviour is observed for the <code class="notranslate">setBounds()</code> method as well:</p>
<ul dir="auto">
<li>positioning behaves the same way;</li>
<li>the size is based on the scale factor of the other display</li>
</ul>
<p dir="auto">Invoking <code class="notranslate">setBounds({ x: 0, y: 0, width: 100, height: 100) })</code> twice would:</p>
<ul dir="auto">
<li><strong>with the first call</strong>, the window is positioned somewhere on the primary display with some scaled size</li>
<li><strong>with second call</strong>, the window is both correctly positioned and resized</li>
</ul>
<p dir="auto"><strong>In case both displays share the same scale , the positioning and resizing of BrowserWindow-s behave as expected.</strong></p>
<h3 dir="auto">To Reproduce</h3>
<p dir="auto">Steps:</p>
<ol dir="auto">
<li>Add a second display</li>
<li>Position the second display on the right side of the primary display</li>
<li>Change the display "Scale" factor (e.g. to 150%) so that it differs with the one for the primary display</li>
<li>Run the Electron the basic program:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const {app, BrowserWindow} = require('electron')
app.disableHardwareAcceleration();
 
let mainWindow
 
function createWindow () {
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 300, height: 300,
        show: true
    })
    mainWindow.loadURL('http://github.com')
 
    mainWindow.setPosition(
        10000, // ensure the window is far enough to the right so that
               // it is relative to the second (non-primary) display
        0
    );
 
    setTimeout(function() {
        // bring the window back to the primary display
        mainWindow.setBounds({
            x: 0, y: 0,
            width: 300, height: 300 // same as the initial
        });
        console.log(&quot;Moved&quot;, mainWindow.getPosition());
    }, 4000);
}
 
app.on('ready', createWindow)
 
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit()
    }
});"><pre class="notranslate"><code class="notranslate">const {app, BrowserWindow} = require('electron')
app.disableHardwareAcceleration();
 
let mainWindow
 
function createWindow () {
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 300, height: 300,
        show: true
    })
    mainWindow.loadURL('http://github.com')
 
    mainWindow.setPosition(
        10000, // ensure the window is far enough to the right so that
               // it is relative to the second (non-primary) display
        0
    );
 
    setTimeout(function() {
        // bring the window back to the primary display
        mainWindow.setBounds({
            x: 0, y: 0,
            width: 300, height: 300 // same as the initial
        });
        console.log("Moved", mainWindow.getPosition());
    }, 4000);
}
 
app.on('ready', createWindow)
 
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit()
    }
});
</code></pre></div>
<ol start="4" dir="auto">
<li>The BrowserWindow should be positioned at the top left corner of the primary display</li>
</ol>