Vscode: Full Screen at certain resolutions causes bottom bar to overflow.

Created on 26 Nov 2019  Â·  77Comments  Â·  Source: microsoft/vscode


Full Screen at certain resolutions causes bottom bar to overflow. This only affects Title Bar Style: Custom, I'm using the Default Dark+ theme, in case it's potentially caused by that.

image

  • VSCode Version: Version: 1.40.2 (user setup) Commit f359dd69833dd8800b54d458f6d37ab7c78df520
  • Electron: 6.1.5
  • Chrome: 76.0.3809.146
  • Node.js: 12.4.0
  • V8: 7.6.303.31-electron.0
  • OS: Windows_NT x64 10.0.18362

Steps to Reproduce:

  1. Open VS Code in Full-Screen
  2. On specific setups, the bottom action bar is partially obscured, going beyond the edge of the screen.


Does this issue occur when all extensions are disabled?: Yes

confirmed electron titlebar upstream windows

Most helpful comment

I now have a good workaround for the issue, see: https://github.com/danielgjackson/vscode-maximize-fix

This program simply removes the "WS_CAPTION" window style on any VS Code windows, and this fixes the issue for me.

This is clearly not the real answer, and it may just be working around the symptoms and not the cause.

Edit: I've now made a VS Code extension for it: https://marketplace.visualstudio.com/items?itemName=danielgjackson.vscode-maximize-fix

All 77 comments

Looks like #83456, however it's not reproducible in insiders builds after #85266 was merged and cannot reproduce in 1.40.2 (zip download)

/cc @deepak1556

Thanks @IllusionMH , yeah it sounds similar but that one is definitely fixed.

On specific setups

@GeorgeWL can you be more specific about the setup in which you see this issue ? The resolution and how the displays are arranged. Also can you attach a video demo. Thanks!

Thanks @IllusionMH , yeah it sounds similar but that one is definitely fixed.

On specific setups

@GeorgeWL can you be more specific about the setup in which you see this issue ? The resolution and how the displays are arranged. Also can you attach a video demo. Thanks!

Well I'm not really sure why, but if I full screen it on my bottom screen, there's no issue there.

But on either of my two top screens, it is.

Top Left (screen 2): 2560 x 1440 (100% scaling)
Top Right (screen 3): 1920 x 1200 (100% scaling)
Center Bottom (screen 1): 3840 x 2160 (250% scaling)

Ignore the blurring, that's intentional obfuscation so don't get in trouble with work security team.

image

I have the exact same issue. It appeared today after updating to version 1.40.2 (f359dd6).

I have a two monitor setup:

  • Primary monitor: 3200 x 1800 (250% scaling)
  • Second monitor: 1920 x 1080 (100% scaling)

VS Code looks fine in my primary monitor, but goes beyond the screen boundaries in my second monitor. I'm happy to provide more info in order to help resolve this

That's something worth noting, it did only start after the latest update (1.40.2)

Before the update, I'd had no similar issues and hadn't seen this issue.

I'm having the same issue in 1.40.2 (issue did not exist in prior version). I have a laptop hooked up to an external monitor. The laptop screen is at 3840x2160, the monitor is at 2560x1440, and scaling is set to 250%. When Code is maximized in the external monitor, all 4 edges the window hang off the edges of the screen (it's particularly noticeable on the bottom bar, but all 4 edges are definitely doing it).

now that you mention it @SonOfHans yeah all 4 edges of mine hang off the edge of the screen, just only by a pixel or two, except the bottom bar, which is by like 10-20 pixels.

Temp workaround for now is to turn off the much prettier custom title bar mode.

Just got a new Surface Book 2 at work and that was one of the first things I noticed.
Doesn't happen on the internal screen but on an external Dell one with high DPI.

The same thing happens on the Insider 1.41. This is particularly painful when the errors are hidden. I can't see the red squares in the scrollbar.

When it's small, it's OK...
small-ok

But when it's maximized, it's not OK :(
big-not-ok

Having this issue with 1.41.0.

I have 2 monitors setup:

  1. Laptop screen, 3840x2160, 250%, VS Code looks ok
  2. Connected monitor, 1920x1080, 100%, VS Code window exceeds screen margin when maximized. Screenshot attached below:

screen

External monitors are 1920 x 1080 (Recommended) with 100% (Recommended) scaling.

Took me a little while to figure out how to downgrade so wanted to jot down instructions for others while we wait for a fix. The September 2019 (v1.39) update was the most recent version that worked for me. I'm using snap so I'll jot down the instructions, similar steps would be done for .deb or .rpm etc installs.

For Windows / macOS people, uninstall VS Code and then use the installer hosted at the link above. For Linux, same thing but coordinate with your chosen package manager. I'm using snap, these were my instructions:

  1. Download the {.snap, .deb, .rpm, etc} file for your package manager from the link above.
  2. Uninstall the existing code installation. For me: sudo snap remove code
  3. Install the downgraded version. sudo snap install --classic --dangerous ~/Downloads/code-stable-1574694518.snap The --dangerous comes from here.

It's really helpful that so many older versions are hosted online ... thanks :slightly_smiling_face: Much easier than building from source!

I'm currently using VSCode with version 1.39.2, and checking daily with VSCode insider when a working version is released :(

I am too having this issue. My setup is

  1. Primary Monitor: 3240x2160 (95dpi)
  2. Secondary Monitor: 1920x1080 (82dpi)
  3. Third Monitor: 1920x1080 (260dpi)
    Changing the main monitor in windows does not change a thing.

VSCode displays fine on my main display:
image

But all 4 edges are cut if I maximize it on the other displays:
image

Interestingly if I use the windows snap feature to fill half the screen everything is working as expected:
image

I have experienced this issue as well on my Surface Book 2. In my case, the issue occurs when I first launch VS Code on the Surface Book 2 when not attached to an external display, but then connect to an external display. I am guessing that when VS Code is launched on the SB2, it is running on a High DPI display, however my external monitor is not a High DPI display, so it is possible that either VS Code, Electron, or Windows is attempting to be DPI-aware and calculating the screen dimensions (including the task bar height) while on the High-DPI display, but the task bar height changes when moving to a non High-DPI display and the task bar height is not recalculated.

Repro Steps:

  1. Prereq: On a laptop with a High DPI display (in my case, a Surface Book 2)
  2. Prereq: No external displays attached
  3. Prereq: No instance of VS Code is open
  4. Launch VS Code and maximize window
  5. Attach a non-High DPI display to the laptop as the only display (i.e., "Second Screen Only" in Windows 10)
  6. Outcome: Observe that a maximized VS Code window overflows the available window height and the status bar is cut off.

Closing VS Code and re-opening while attached to the non-High-DPI display fixes the issue (however, the "Developer: Reload Window" command notably does not fix the issue, only a full app restart).

The issue also occurs in the opposite direction, though the behavior is slightly different. If you launch VS Code while attached to a non-High DPI display and then switch to a High DPI display, the maximized VS Code window does not fill the available screen height, possibly due to the same reason.

Repro Steps:

  1. Prereq: On a laptop with a High DPI display (in my case, a Surface Book 2)
  2. Prereq: A non-High DPI external display is attached and is set as the only display (i.e., "Second Screen Only" in Windows 10)
  3. Prereq: No instance of VS Code is open
  4. Launch VS Code and maximize window
  5. Detach the non-High DPI display from the laptop, switching to the built-in High DPI display
  6. Outcome: Observe that a maximized VS Code window underflows the available window height and does not fill the available space.

For me the steps are super simple and repro 100%:

Steps to Reproduce:

Have more than one PC display
Open VS Code
Maximize it
Close it
Open VS Code

I'm not certain, but its possible this may be related? https://github.com/electron/electron/issues/10862

Could. I hope not though, getting stuff fixed in Electron takes ages :(

Closing VS Code and re-opening while attached to the non-High-DPI display fixes the issue (however, the "Developer: Reload Window" command notably does not fix the issue, only a full app restart).

That does not fix my problem.

Facing same problem. Not only bottom bar, even top, left and right bar are overflowing. It is more noticeable in bottom bar due to its color and less margin between text and the edges.

I am on surface book 2 using external display having resolution of 1920x1200.

Version: 1.42.0 (user setup)
Commit: ae08d5460b5a45169385ff3fd44208f431992451
Date: 2020-02-06T10:51:34.058Z
Electron: 6.1.6
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Windows_NT x64 10.0.19041

To anyone interested... I found a workaround... if you just set the primary monitor to be a non-high DPI and restart VSCode, it's sorted. (for now)

Simpler workaround, just disable custom title bar.

@GeorgeWL I did not even realize this was a setting! Thank you!

Can confirm that untill Feb. 2020, this problem still exists.

Here's a workaround:

Manually drag the left/right borders to the edge of the screen, and then double click the top or bottom border to vertically size it to full height. This seems to fill the screen whilst making the status bar appear correctly.

This works for me putting VS Code on a 100% DPI monitor where my main display (with the windows taskbar) is the 250% Laptop screen.


Another workaround is to use cmdow to script positioning the window.

  1. Put VS Code in the desired location using the above method.

  2. Open a CMD prompt / terminal with CMDOW on path and run:
    cmdow "*Visual Studio Code" /F /P

  3. using the position and positon and size values from that command insert the values in this command and run it:
    cmdow "*Visual Studio Code" /MOV <X> <Y> /SIZ <W> <H>

You can then use the command from 3 above to automatically position VS Code whenever you open it.

another workaround: disable custom title bar setting

Disabling the title bar is not an option for all affected use cases, nor is setting the primary monitor to the low dpi one. In my scenario, for example, the problematic monitor is vertical. Having that be the primary monitor breaks most things (hehe). Additionally, the overflow is not just top or bottom, it flies off the side of the screen.

Another workaround: vscode properties-> compatibility -> Change high DPI settings -> enable "Override High DPI scaling behavior" and set the "Scaling performed by" to "System (Enhanced)"

Thanks, @matt13rox ! Your workaround worked for me.

  • Primary screen: 3840x2150, 250% scaling
  • 2 external monitors: 1920x1080, 100% scaling

For clarity, it's not VS Code properties, but the VS Code launcher properties.

For clarity, it's not VS Code properties, but the VS Code launcher properties.

@LeahCim Where do I find the VSCode Launcher?

@DanielHabenicht , it's the Widows 10 app launcher for VS Code, so it's in the Start menu/screen or on your task bar. Just right-click the launcher, then right-click "Visual Studio Code" in the launcher menu that shows, then choose Properties > Compatibility > Change high DPI settings > Override HDP scaling behaviour. (check) | Scaling performed by: System (Enhanced)

The workaround solution provided by @matt13rox is working for me as well. I can confirm that this is still an issue with v1.43.0 which was released this week.

@DanielHabenicht , it's the Widows 10 app launcher for VS Code, so it's in the Start menu/screen or on your task bar. Just right-click the launcher, then right-click "Visual Studio Code" in the launcher menu that shows, then choose Properties > Compatibility > Change high DPI settings > Override HDP scaling behaviour. (check) | Scaling performed by: System (Enhanced)

This worked for me.

Another workaround: vscode properties-> compatibility -> Change high DPI settings -> enable "Override High DPI scaling behavior" and set the "Scaling performed by" to "System (Enhanced)"

Although this works and VS Code looks better in the secondary low resolution monitor, it makes text in the primary high resolution monitor blurry.

Recently updated to 1.43.0 and this has gone away, however, I see it's still a problem for others with this release. I did rearrange my displays in Windows settings about the same time, so I'm wondering if it is due to slight misalignment of displays vertical position. I also applied windows updates recently (I'm on Win 10 - 1909, OS Build 18363.719).

Issue still present in 1.43 for me. Windows 10 2004 19041.153

Same here. (It was the same before this version)

Version: 1.43.1 (user setup)
Commit: fe22a9645b44368865c0ba92e2fb881ff1afce94
Date: 2020-03-18T07:01:20.184Z
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.18362

I'm using Surface Pro 7, and two external monitors.

SP7 screen(set by main screen): 2736x1824 200%
Other two screens: 1920x1080 100%

There's no problem on SP7 full screen:
image

Move VScode window to external monitor and Maximize:
image

The scroll bar is too thin...

And if i press Win + ->, same issue on Surface Main Screen (not always)
image

There's no problem when disable custom title bar, but I want to use the more pretty VS Code.

I hope this problem will be solved soon.

FYI @matt13rox's solution worked perfectly for me: https://github.com/microsoft/vscode/issues/85592#issuecomment-596416698

Tried @matt13rox 's solution... it works, but the font rendering is now horrible.

Thank you @matt13rox for that solution it is working for me same:

  • Primary screen: 3840x2150, 250% scaling
  • external monitor: 1920x1080, 100% scaling

although if I move vs code to my 4k display all text looks fussy, so I have to revert the change from time to time.

Dual screen user here, also with same issues.
The fix reported #85592 works fine for me

I would also say, the text appears clearer using this setting? Seems like the scaling issue was causing some blurriness in the text.

I think this is related to the Electron bug linked earlier in this issue. The same thing happens in Slack for me (which is also using Electron, not sure of which version current Slack uses). It cuts off part of all four sides, but you can really see it at the bottom right of the picture.

The fix for vs code that @matt13rox mentioned also fixes Slack for me.

image

Difficult to tell with Slack as there is a lot more negative space in the UI compared to VS Code, but I can confirm (with the help of the scrollbar in the left menu) is affected by this issue.

For the benefit of newcomers, the comment @ryan-harris is referring to is https://github.com/microsoft/vscode/issues/85592#issuecomment-577362693

Gosh, going back to the native title bar... it just looks sooooooo ugly - but that's the only workaround to this issue.

I don't even need to set up a reminder to check this issue from time to time, because for sure ugly title bar will keep reminding me about this issue :smile:

Another workaround: vscode properties-> compatibility -> Change high DPI settings -> enable "Override High DPI scaling behavior" and set the "Scaling performed by" to "System (Enhanced)"

I had to use "System" instead of "System (Enhanced)" as the latter fixed the overflow on my 1080 external monitor but caused it to occur on my 4k internal monitor (which wasn't happening before). Using "System" works for me on both.

image
image
image

Your mileage may vary...

I'm experiencing this with an external monitor that is (2560x1440) in all selected resolution/scale options I've tried so far.

VS Code Version 1.45.1
OS: Windows_NT x64 10.0.18363

I'm experiencing this on my secondary monitor.

Primary monitor: 3840 x 2160 (250% scaling)
Secondary monitor: 2560 x 1440 (100% scaling)

Version: 1.45.1 (user setup)
Commit: 5763d909d5f12fe19f215cbfdd29a91c0fa9208a
Date: 2020-05-14T08:27:35.169Z
Electron: 7.2.4
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.17763

Same issue here.

Primary - Surface Book 3000x2000 (200%)
Secondary - 1920x1080 (100%)

Version: 1.45.1 (user setup)
Commit: 5763d909d5f12fe19f215cbfdd29a91c0fa9208a
Date: 2020-05-14T08:27:35.169Z
Electron: 7.2.4
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.19041

The workaround from @matt13rox fixes the scaling issue on the external monitor but I agree with @manospasj that the text on the primary monitor is blurry now. I tried both "System" and "System (Enhanced)" options and both make the text blurry.

In case this is helpful: I'm also noticing this behavior on the Slack desktop client. Guess it's an electron thing...

Same here.
Screen resolution: 1440 x 900 (100%)

Version: 1.45.1 (user setup)
Commit: 5763d90
Date: 2020-05-14T08:27:35.169Z
Electron: 7.2.4
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.18363
image

Solved by the suggested workaround

Problem goes away when i change settings:

...
    "window.titleBarStyle": "native"
...

@airtonix this is a much better solution than the others I've tried even if vs code isn't quite as pretty anymore.

@dwaynebradley use @airtonix solution

@airtonix , set your default mode to "Dark" and then there is no difference.

@airtonix This totally works. However, it gets better.

When I changed my settings to Title Bar Style = "native",
I noticed the ugly white bar at the top immediately. I was curious as to what else had changed.
So I changed it back to "custom" and guess what happened?
The height of the bar at the bottom got fixed. And my window menu bar went back to the dark theme. It's great.

For reference, I'm on Windows 10. The error was not present last time I was on my computer, and appeared today for no apparent reason. I did not test just restarting/reloading vsCode, nor do I have the ability to test this. This fix may have been simply the result of performing a full restart (which is required when switching the title bar style).

I also had this issue and changing the window.titleBarStle to native fixed it.

Resolution: 1920 x 1200
Orientation: Landscape
Scaling: 100%

Version: 1.46.0 (system setup)
Commit: a5d1cc28bb5da32ec67e86cc50f84c67cc690321
Date: 2020-06-10T09:03:20.462Z
Electron: 7.3.1
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.18363

that's not really a fix though, rather a workaround.

Apparently the workaround also fixes it. I changed to 'native', ran with it for a little while then changed it back to 'custom' and the issue appears to have disappeared. This has remained trued for several restarts now, and even more recently after an upgrade to the latest 1.47.1.

That sounds more like coincidence tbh

Could be -- just documenting my experience, perhaps it could give some insight to the underlying cause and a true solution.

It's a bug in Electron afaik and they don't seem to care about it that much.

I've had it with all this negative talk about Electron. I'm switching to
Proton.

On Fri, Jul 17, 2020 at 7:13 PM Benjamin Staneck notifications@github.com
wrote:

It's a bug in Electron afaik and they don't seem to care about it that
much.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/microsoft/vscode/issues/85592#issuecomment-660375795,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABBNXX6TSZWZ7ZJJXBN5M4TR4DLI3ANCNFSM4JRVEVEQ
.

@davidrimshnick are you positive? I don't find it so attractive. Your decision seems a little bipolar

Does anyone have the issue tracker link for Electron for this issue?

On Sat, Jul 18, 2020 at 3:06 AM kcbleeker notifications@github.com wrote:

@davidrimshnick https://github.com/davidrimshnick are you positive? I
don't find it so attractive. Your decision seems a little bipolar

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/microsoft/vscode/issues/85592#issuecomment-660440619,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABBNXXZH6YVFU3G4CBST6ILR4FCYDANCNFSM4JRVEVEQ
.

I have this issue, and I think I have a reliable way to reproduce it, a possible explanation, and a workaround.

Background: I have one high-DPI display on a laptop, and a standard DPI monitor.

Steps to reproduce:

  1. Close all instances of VS Code.
  2. Ensure standard DPI display is disconnected, leaving only high-DPI display.
  3. Start VS Code.
  4. Connect standard DPI display and move VS code window to the display.
  5. Maximize VS Code and observe that the window now extends slightly beyond the desktop area in all directions.

Observations: At step 3, right-clicking on the title bar will display a standard-sized system menu on the high-DPI display; after step 4, right-clicking on the title bar will display a larger-than normal sized system menu on the low-DPI display. As if the DPI scaling has not quite fully changed when the window moved between the monitors. The same applies the other way around: moving a working low-DPI window to the high-DPI display shows a small system menu. Another hint: in the overflowed part (on the other monitor) clicks are passed through as if it wasn't there, so this area seems clipped for click handling.

Speculation: I have a feeling that DPI scaling used by the system menu applies to other metrics, such as the window border size (for resizing), and this difference in scaling probably accounts for the window overflowing by a small amount. It looks like it's usual for Windows to maximize slightly outside the visible area (presumably for the invisible resize border? -- Update: found this article about it ), and it must apply some offset for the client area and visual clipping. Perhaps the logic for frameless windows is not quite right: maybe EnableNonClientDpiScaling() is not called; or values from GetSystemMetrics() were cached and it was not called again after the DPI change; or there is custom maximize logic that does not properly take the metric into account; or that the offsets are themselves being DPI scaled.

Workaround: The only way I know is to close all VS Code windows and re-open them while the standard DPI display is attached

Edit: It sounds very much like the sort of thing described in this (fixed) Electron issue comment: https://github.com/electron/electron/issues/8728#issuecomment-283192228 -- perhaps the difference is that the window changes DPI.

I now have a good workaround for the issue, see: https://github.com/danielgjackson/vscode-maximize-fix

This program simply removes the "WS_CAPTION" window style on any VS Code windows, and this fixes the issue for me.

This is clearly not the real answer, and it may just be working around the symptoms and not the cause.

Edit: I've now made a VS Code extension for it: https://marketplace.visualstudio.com/items?itemName=danielgjackson.vscode-maximize-fix

I'm having the same issue as above, the extension posted above by @danielgjackson fixed it for me. I tried switching to native and back to custom but even with dark mode set as my default the white bar remained.

Screenshots of my monitor setup for reference. Similar to another user above I'm using a Surface with a lower resolution external monitor.



This should be fixed with latest insiders https://code.visualstudio.com/insiders/ , please comment if its still an issue. Thanks!

@deepak1556 gave it a quick check:

Version: 1.50.0-insider (system setup)
Commit: e13875b77c89b95f20ccb5667e14ff164c198e57
Date: 2020-09-15T05:35:57.362Z
Electron: 9.3.0
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Windows_NT x64 10.0.19041

And still no luck for me 😢 Here's a screenshot of entire screen:

Bottom bar (as well as all other edges of the window sticks outside). Added a Google Chrome window panned to the right side of screen for comparison.

@deepak1556 I'm afraid I don't think Insiders 1.50 fixes this issue.

I don't envy you getting to the bottom of this, it looks like a story of mixed-DPI (what was connected when launched vs connected later), window styles and client areas. Hopefully some of the following details may help you.

Firstly, I made sure I was not running my "vscode-maximize-fix" extension (which works around this issue by changing the window style).

I have an internal high-DPI monitor:

  • Monitor 1: 3840x2400 (300%)

I used Spy++ to measure window coordinates, but I think it's not high-dpi aware so the ones on Monitor 1 are scaled to 1/3.

Spy++ measures a Notepad window (as it is per-monitor DPI aware) as:

  • Monitor 1 maximized: (-6, -6)-(1286, 776) 1292x782 (1/3 scaled coordinates)

Spy++ measures a VS Code Insiders 1.50 (all other instances closed, opened while only Monitor 1 active) as:

  • Monitor 1 maximized: (0, -6)-(1280, 770) 1280x776 (1/3 scaled coordinates)

Keeping VS Code-Insiders running, connecting an external monitor as the primary monitor (to the right of Monitor 1):

  • Monitor 2: 1920x1080 (100%)

Spy++ measures a Notepad window as:

  • Monitor 1 maximized: (-3846, -6)-(-2554, 776) 1292x782 (1/3 scaled coordinates)
  • Monitor 2 maximized: (-8, -8)-(1928, 1058) 1936x1066

...the overflowed window coordinates of Notepad are NOT visible, this seems to be a bit of a windows hack for standard window styles to push their resizing borders off the edge, even though they're not actually visible when maximized on multi-monitors; see: https://devblogs.microsoft.com/oldnewthing/20120326-00/?p=8003

Spy++ measures VS Code Insiders 1.50 (kept open since the different-DPI Monitor 2 was added)

  • Monitor 1 maximized: (-3840, -6)-(-2560, 770) 1280x776 (1/3 scaled coordinates)
  • Monitor 2 maximized: (-10, -18)-(1930, 1060) 1940x1078

...the maximized window overflows on Monitor 2, and the overflow is visible on the edge of Monitor 1.

Finally, restarting a fresh VS Code Insiders 1.50 while both monitors are connected (the primary is the 100% dpi), gives:

  • Monitor 1 maximized: (-3837, -3)-(-2564, 766) 1273x769 (1/3 scaled coordinates)
  • Monitor 2 maximized: (0, -8)-(1920, 1050) 1920x1058

...with no visible overflow on either monitor, but a white visible band of 10 pixels along the top when maximized on Monitor 1.

Something that may be a hint is that not everything is getting reset when moving between the high/low dpi monitors: I notice that the system menu (Alt+Space or right-click title bar) is not correctly rescaling when the window moves between the two monitors.

  • With both connected and launching on Monitor 2 (100%) the system menu is fine, moving to Monitor 1 (300%) the system menu appears tiny (1/3rd).
  • With only Monitor 1 (300%) connected the system menu is fine, attaching Monitor 2 (100%) and moving the window to it, the system menu appears huge (3x).

...is it possible that perhaps the system metrics used might also not be getting rescaled properly (or cached)?

If you find out why the system menu is not getting rescaled, I'd bet you would be closed in finding out why this issue is happening.

(I'm running 2004 build 19041.508).

Thanks for testing @mlewand

Also thanks @danielgjackson for the added details, the core of the change is in https://github.com/electron/electron/pull/25052. Basically, when WM_WINDOWPOSCHANGING occurs chromium calculates the client area insets using ElectronDesktopWindowTreeHostWin::GetClientAreaInsets which is based on the monitor in which the window is present, calculated using

MonitorFromRect(&rect, MONITOR_DEFAULTTONULL);

https://source.chromium.org/chromium/chromium/src/+/master:ui/views/win/hwnd_message_handler.cc;l=2785-2800 and returns the results in screen pixels scaled to the monitors' DPI. Finally when WM_WINDOWPOSCHANGED happens chromium will update the DWM frame which in turn calls ElectronDesktopWindowTreeHostWin::GetDwmFrameInsetsInPixels to extend the dwm frame into client area, we are currently using

HMONITOR monitor = ::MonitorFromWindow(
        native_window_view_->GetAcceleratedWidget(), MONITOR_DEFAULTTONEAREST);

most likely this is not returning the correct monitor during the drag operation, which would align with your observation. I am OOF this week, will look into this after I return to work.

Also there is a round-off error that comes with WinFrameView::GetBoundsForClientView() because its calculations are in DIP which is the cause for https://github.com/microsoft/vscode/issues/85655

Need some testing help again if the latest insiders https://code.visualstudio.com/insiders/ fixes the issue. Thanks!

Need some testing help again if the latest insiders https://code.visualstudio.com/insiders/ fixes the issue. Thanks!

I have a laptop 4k with a secondary 1080 screen, and with Insiders version the issue is not present.

Cool, works also for me in the latest insider build 🎉 Now I'm anxiously waiting for the October release 😃

Workaround for me was just close all VS Code windows, disconnect my dock, reconnect my dock, re-open VS Code. Looking forward to the standard release to fix this.

Present for me as of 1.51.0 (2020-11-05)

Weird, it's fixed for me. Works like a charm @ 1.51.0.

Weird, it's fixed for me. Works like a charm @ 1.51.0.

huh :(

I'm still having to do the Win10 System (Enhanced) scaling

Was this page helpful?
0 / 5 - 0 ratings

Related issues

villiv picture villiv  Â·  3Comments

VitorLuizC picture VitorLuizC  Â·  3Comments

curtw picture curtw  Â·  3Comments

chrisdias picture chrisdias  Â·  3Comments

omidgolparvar picture omidgolparvar  Â·  3Comments