Issue 1:
Preflight Checklist

I have read the Contributing Guidelines for this project.

I agree to follow the Code of Conduct that this project adheres to.

I have searched the issue tracker for an issue that matches the one I want to file, without success.

Issue Details

Electron Version:

Electron 9.3.3 (for VSCode 1.51.1)

Operating System:

Windows_NT x64 10.0.19042

Last Known Working Electron version:

unknown

Expected Behavior

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.

Actual Behavior

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.

To Reproduce

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.

Screenshots

Additional Information

Issue 2:
Electron version: 3.1.0

Operating System (Platform and Version): Windows 10 Enterprise, 1803

When having a setup of two (or more) displays with mismatching "scaling" factors, calling BrowserWindow.setBounds() 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.

Expected behavior

When a BrowserWindow is positioned on a display, different from the primary display (regardless of the "scaling" factor), using BrowserWindow.setPosition(0, 0) would position the window at the top left corner of the primary display

Furthermore, for two sequential calls, e.g. of BrowserWindow.setBounds({ x: 0, y: 0, width: 100, height: 100) }), the latter call should affect neither the position nor the size of the window

Actual behavior

Using setPosition(0, 0) 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 on the primary display at all but somewhere off screen instead, e.g. {x: -222, y: -103} (this was reported by the getPosition() method of the window after the window repositioning had took place).

Similar behaviour is observed for the setBounds() method as well:

positioning behaves the same way;

the size is based on the scale factor of the other display

Invoking setBounds({ x: 0, y: 0, width: 100, height: 100) }) twice would:

with the first call, the window is positioned somewhere on the primary display with some scaled size

with second call, the window is both correctly positioned and resized

In case both displays share the same scale , the positioning and resizing of BrowserWindow-s behave as expected.

To Reproduce

Steps:

Add a second display

Position the second display on the right side of the primary display

Change the display "Scale" factor (e.g. to 150%) so that it differs with the one for the primary display

Run the Electron the basic program:

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()
}
});

The BrowserWindow should be positioned at the top left corner of the primary display