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

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

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 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

Problem goes away when i change settings:

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

Simpler workaround, just disable custom title bar.

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.

@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)

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:

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…

But when it’s maximized, it’s not OK 😦

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).

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.

Your mileage may vary…

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:

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

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

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.

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

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

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

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.

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

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

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

@LeahCim Where do I find the VSCode Launcher?

another workaround: disable custom title bar setting

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

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

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 🙂 Much easier than building from source!

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.

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

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 .

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

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

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 😄

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.

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.

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)

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.

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

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

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 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.