Fix ‘Text Becomes Blurry When VS Code Application Loses Focus’ Issue on Windows

Hey Guys, :) I’m here with a quick post regarding a really annoying issue on VS Code. Have to say I love VS Code. It’s simple but packs a bunch of features that really helps. Outstanding support for TypeScript, Debugging support for Node, PHP etc. Git commands built in, Useful extensions you can install and lot more makes it one of my favorite, if not the favorite lightweight code editor.

But, then there is this issue Where the text on VS Code becomes really blurry when it loses focus. Especially when you have an external display with Windows scaling level at 100% or at a value that is not the recommended value this becomes an issue and for me this is annoying AF.. >_< If you have experienced this, then you know what I mean. Anyway the blurriness looks like this.

Ok, Lets see how to fix this. As for some background info you may know that VS Code is built using Electron, the cool new framework from GitHub that can build Cross-Platform Desktop apps. And underneath, Electron uses Google’s Chromium project to render the UI Elements. So the issue is really at Electron and Chromium. This really becomes a problem when you mess with Windows Scaling especially on High Resolution displays.

To get around this until this issues is fixed by Electron, you can simply use two chromium flags. You can add these flags to VS Code from the Property Dialog of the Shortcut which you use to run VS Code. The flags in question are these

--disable-gpu

Which disables the GPU Hardware Acceleration for the application and,

--enable-use-zoom-for-dsf

Which Enable the mode that uses zooming to implement device scale factor behavior. You can learn more about these flags and other flags supported by Chromium using this link

Now, you just append these flags to the end of the Target path in the shortcut properties dialog. Like this.

After that restart VS Code and open up some code and try working on another monitor with other application and see that VS Code does not blur its text anymore and looks sharp, just like you want it to be. Yay :D

In comparison, have a look at this before and after photo for the difference in sharpness.

That’s it for this post guys, this issue was bugging the hell out of me for a long time and I’m glad it had a workaround because I really like using VS Code and this fix made it even more enjoyable. I hope this post helped you out if you like VS Code like me and was annoyed with this issue. Happy Coding guys, I’ll see you in the next post. C ya..