Vscode: [meta issue] 1.40 update: Font/Color rendering degradation (macOS, Linux, Windows)

[KeWang323]

• VSCode Version:
  Version: 1.40.0
  Commit: 86405ea23e3937316009fc27c9361deee66ffbf5
  Date: 2019-11-06T17:09:34.601Z
  Electron: 6.1.2
  Chrome: 76.0.3809.146
  Node.js: 12.4.0
  V8: 7.6.303.31-electron.0
  OS: Darwin x64 19.0.0
• OS Version: 10.15.1 (19B88)

Steps to Reproduce:

1. open vscode
2. open a file
3. tried solution in https://github.com/Microsoft/vscode/issues/51132
4. on non-retina displays
   

[Geobert]

Not only MacOS, colors are dimmed on Windows as well:
Version: 1.40.0 (user setup)
Commit: 86405ea23e3937316009fc27c9361deee66ffbf5
Date: 2019-11-06T17:02:13.381Z
Electron: 6.1.2
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Windows_NT x64 10.0.18362

1.39.2:

1.40:

[bhughes339]

My setup is identical to @Geobert, I just wanted to add a gif to make the problem more obvious:

EDIT: Updated with better quality gif

[dhowden]

Also seeing this after update to 1.40.0 (running 10.14.6 MacOS Mojave).

Version: 1.40.0
Commit: 86405ea23e3937316009fc27c9361deee66ffbf5
Date: 2019-11-06T17:09:34.601Z
Electron: 6.1.2
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Darwin x64 18.7.0

[AAulicino]

I'm having the opposite effect in macOS Mojave 10.14.6.

I had to downgrade to 1.39 because the new font intensity is giving me headaches.

EDIT: Aligned both images in gif

[dhowden]

@AAulicino That looks like an anti-aliasing/font-smoothing change rather than just a colour change.

[KeWang323]

are we able to downgrade it to the previous release?

[AAulicino]

@KeWang323 You can find and download previous versions through the Visual Studio Code updates page.

[deepak1556]

There are two different issues here, for macOS users just to confirm do you have any of the workaround from https://github.com/microsoft/vscode/issues/59887 that disables the font smoothing ? If so can you undo them to compare ?

For windows users can you report your findings on https://github.com/microsoft/vscode/issues/82733 , does this only happen with a particular theme ?

[KeWang323]

@deepak1556
I just tried done and undone the following workarounds form https://github.com/microsoft/vscode/issues/59887, but nothing changed:

defaults write com.microsoft.VSCode CGFontRenderingFontSmoothingDisabled 0
defaults write com.microsoft.VSCode.helper CGFontRenderingFontSmoothingDisabled 0
defaults write com.microsoft.VSCode.helper.EH CGFontRenderingFontSmoothingDisabled 0
defaults write com.microsoft.VSCode.helper.NP CGFontRenderingFontSmoothingDisabled 0
defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

[deepak1556]

Thanks @KeWang323

@bpasero is there a web version prebuilt that @KeWang323 can you use to comapre with chrome ? Just want to make sure if this a regression in Catalina so that it can be tracked under https://bugs.chromium.org/p/chromium/issues/detail?id=1013130

[mathieupothier]

I have the exact same behavior on windows. And the other ticket mentioned does not seem to be that related As the issue for this particular user was also present in 1.39 while here, going back to 1.39.2 fixes this. I’ve switched themes but the issue persist. If you are sure you want the findings there, well, I can proceed to send them there too.

[offbeatful]

Thanks, Microsoft! Downgrading...

[dhowden]

I'm running on Mojave (not Catalina) and seeing the text dimming in the entire interface since upgrading to 1.40.0 (do not think this is a smoothing issue in my case).

1.40.0:

1.39.2:

[deepak1556]

@dhowden is this with retina or non-retina display ?

[dhowden]

@deepak1556 Retina.

[varxzy]

This problem also occurred after the 1.40 version was upgraded. The file theme color is darkened and the theme is Dark+ (default dark). I am running on the macOS Sierra system version, which is the Retina screen.

Version: 1.40.0
Commit: 86405ea23e3937316009fc27c9361deee66ffbf5
Date: 2019-11-06T17:09:34.601Z
Electron: 6.1.2
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Darwin x64 16.7.0

[zhoubhin]

yep, it's seem more darker or pale after upgrade to 1.40
Version: 1.40.0
OS: macOS Mojave 10.14.6 (18G1012)

[trananhmanh89]

same
vscode 14
windows 10
theme: one dark pro vivid

[bpasero]

@deepak1556 yes, people can follow our setup instructions and then simply run "yarn web" to get VSCode open in the browser.

Also documented here: https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_40.md#run-vs-code-web-out-of-sources

[nklmilojevic]

Having this problem as well. The fonts are too thin.

Non-retina screen, macOS Catalina.

[afarkas128]

Hope they will fix this soon, as for now I am switching back to sublime until they fix this or another hackie-fix is found

[David-Else]

NIGHTMARE!!! In Linux Code 1.40.0 has turned off or messed up the sub pixel rendering, now the fonts look much worse... this must be fixed urgently!! I have made a GIF, make it full screen (so there is no resizing going on) and watch for a while.

To view the GIF properly on my system you need to download it first (click and save image as) then view it using something other than a browser. The browser seems to do something to it and make it all slightly blurry so you cant really see the issue properly.

Try and focus on the m in jsdom on line 2... watch how it goes weak and hard to read. See the m in import too. Look at line 14, the rendering of a in available and the = in the comments seems to move out of place too.

If this is not solved in the recovery release I will go into a deep depression! I have a 1920 x 1080 display.

[Roman-Popov]

same here :(
vscode 1.40
windows 10
theme: one dark pro vivid

[bpasero]

Out of curiosity, we recently started to build VSCode with the latest Electron 7.x that comes with Chrome 78. Does something change in those versions?

Download:

• macOS: Download
• Linux (DEB): Download
• Linux (RPM): Download
• Linux (ZIP): Download
• Windows: Download

[nklmilojevic]

Just tried it, doesn't change a thing.

[jccit]

Here's what I'm seeing across 1.39.2, 1.40.0 and this new build. My colours are a lot more desaturated ever since electron was upgraded. I'm using a DCI-P3 retina screen which might be the cause of the issue. I've noticed that Firefox's colours look more saturated compared to Chrome's when I'm using this type of monitor

• Theme: BeardedTheme Anthracite
• Font: Fira Code
• OS: macOS 10.15.1

1.39.2

1.40.0

1.41.0 Exploration

[sseremelis]

I have the same issue after updating to 1.40.0
Version: 1.40.0
OS: Mac OS Catalina 10.15.1
Theme: Night Owl
Non-retina display

[andreyjamer]

I have the same on exploration build.
Windows 10

[bpasero]

Another try (for macOS users ONLY!):

• open command palette
• pick "configure runtime arguments"
• comment out this line: "disable-color-correct-rendering": true
• save
• restart

Also related: does it change if you configure "disable-hardware-acceleration": true?

[jccit]

Just tried the above fix, commenting that line out didn't work for me. However if I set "disable-color-correct-rendering": false, the colours return to their pre 1.40.0 state. Disabling hardware acceleration does not have any effect.

So it seems that a quick fix for any macOS users is to set "disable-color-correct-rendering": false

[jirsbek]

I can confirm @bpasero and @jccit solution – setting "disable-color-correct-rendering": false in argv.json works for me on macOS Catalina. Colors are bright again.

[bpasero]

@jccit @jirsbek thanks a ton for trying. I am still a bit puzzled why simply commenting out the line does not help. Can you do this for me: configure the setting as:

"disable-color-correct-rendering": "active"

(ignore the error in the editor).

Does that also help after restart?

[jccit]

@bpasero Just tested, setting it to "active" has the same effect as false for me. Colours are vibrant again

[bpasero]

@varunj166 I have reopened https://github.com/microsoft/vscode/issues/84214 so that we can discuss blurry font rendering separate from this issue.

[jirsbek]

@bpasero I can confirm the same as @jccit , "disable-color-correct-rendering": "active" works as well.

[offbeatful]

@bpasero Thank you!!!! I can confirm the issue is resolved: "disable-color-correct-rendering": false
Windows 10.

The moment you realized that not everything can be easily covered with automated tests...

[somq]

Same here

VSCode Version: 1.40.0
OS: Windows 10

[TheDutchCoder]

Neither of hese solutions work for Mac OS Mojave on a non-retina (external) display, colors are still washed out.

[Geobert]

"disable-color-correct-rendering": false didn't work for me on Win 7, I'll test Win 10 once at home

[trananhmanh89]

"disable-color-correct-rendering": false didn't work for me on Win 7, I'll test Win 10 once at home

Same, value are "active" or "false", both don't work.

windows 10,
here is screenshot, right is vscode 14, left is sublime 3

[Geobert]

"disable-color-correct-rendering": false didn't work for me on Win 7, I'll test Win 10 once at home

Win 10, doesn't help neither

[nklmilojevic]

Another try (for macOS users ONLY!):

* open command palette

* pick "configure runtime arguments"

* comment out this line: `"disable-color-correct-rendering": true`

* save

* restart

Also related: does it change if you configure "disable-hardware-acceleration": true?

Tried on my my Mac, the fonts are still very thin and nowhere near the 1.39.2 version.

[KeWang323]

"disable-color-correct-rendering": false doesn't work for my mac catalina
how do you guys set up those? @jjyyxx @jccit

defaults write com.microsoft.VSCode CGFontRenderingFontSmoothingDisabled 0
defaults write com.microsoft.VSCode.helper CGFontRenderingFontSmoothingDisabled 0
defaults write com.microsoft.VSCode.helper.EH CGFontRenderingFontSmoothingDisabled 0
defaults write com.microsoft.VSCode.helper.NP CGFontRenderingFontSmoothingDisabled 0
defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO

[dhowden]

@bpasero @deepak1556 (Mojave, retina). Using "disable-color-correct-rendering": false (or "active") does improve things in 1.40, but it is still dimmer than the colour in 1.39.2:

1.40 ("active"):

1.39.2

[deepak1556]

Can everyone with the color profile issue try the latest insiders from https://code.visualstudio.com/insiders/ , which has a potential fix for the issue. Thanks!

[svipas]

I don't know if that helps, but I took screenshots on my macOS.

• macOS Catalina 10.15.1 (19B88)
• MacBook Air (Retina, 13-inch, 2018)

1.39.2

Version: 1.39.2
Commit: 6ab598523be7a800d7f3eb4d92d7ab9a66069390
Date: 2019-10-15T15:33:00.827Z
Electron: 4.2.10
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Darwin x64 19.0.0

1.40.0

Version: 1.40.0
Commit: 86405ea23e3937316009fc27c9361deee66ffbf5
Date: 2019-11-06T17:09:34.601Z
Electron: 6.1.2
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Darwin x64 19.0.0

Personally for me 1.40.0 is way better than 1.39.2

[Geobert]

Can everyone with the color profile issue try the latest insiders from https://code.visualstudio.com/insiders/ , which has a potential fix for the issue. Thanks!

Still have the issue, Windows 10

[deepak1556]

@Geobert I think the windows issue you are facing should be same as https://github.com/microsoft/vscode/issues/84214 , can you try https://github.com/microsoft/vscode/issues/84214#issuecomment-551842176 ?

[Geobert]

@Geobert I think the windows issue you are facing should be same as #84214 , can you try #84214 (comment) ?

No luck (up is 1.39.2, down is insider) without the setting:

with the "editor.disableLayerHinting": true

[SnosMe]

[dhowden]

Can everyone with the color profile issue try the latest insiders from https://code.visualstudio.com/insiders/ , which has a potential fix for the issue. Thanks!

@deepak1556 (Mojave, retina) Insiders build colours are the same as setting "disable-color-correct-rendering": "active" in 1.40 for me (still not the same as 1.39.2 https://github.com/microsoft/vscode/issues/84154#issuecomment-551964831)

[deepak1556]

Thanks for trying it out, the color profile should be same as 1.39.2 with insiders and this fix will land in our recovery stable build soon, as the for the thin icon sizes on macOS we are looking into it currently, will get back if needed more info on this. And for the blurred font rendering on windows and linux would like to follow up on https://github.com/microsoft/vscode/issues/84214

[tgani-msft]

This looks like the same issue I've been seeing #82733

Files I added to the original issue seem to have compression artifacts but I have new ones at:

https://i.imgur.com/pTQt24d.png
https://i.imgur.com/65TNmYv.png

It's easy to see the fuzziness in the VS Code rendering compared to VS. In fact if the Zoom dropdown (lower left corner) is used in VS, I get rendering identical to VS Code. I suspect ClearType antialiasing (I'm on Windows) is not being used by VS Code while VS does use it unless zoomed.

[nvmnghia]

Did anyone notice the rendering of powerline font in the terminal isn't accurate anymore? I'm using 1.40 on Mojave.

[enkia]

Insiders seems to fix the desaturated color issue on macOS Catalina 10.15.1 Retina iMac 2017.

1.40.0:

Insiders:

1.39.2:

[dhowden]

@enkia Can you do a comparison to the rendering from 1.39.2? Although it's not as bad, the colours for me still get dimmer moving from 1.39.2 -> 1.41 (insiders).

[enkia]

@enkia Can you do a comparison to the rendering from 1.39.2? Although it's not as bad, the colours for me still get dimmer moving from 1.39.2 -> 1.41 (insiders).

Yes, because I downgraded last night, heh. Edited comment to reflect 1.39.2, but the PNGs don't do justice to the drastic change in color on screen from 1.40 to Insiders/1.39.2, though. I'm tabbing right now through both Insiders and 1.39.2 and can't tell the difference. I feel like I could tell in a heart beat because I've obsessed over every color in ever corner of the theme I'm using for a couple months.

[bhughes339]

Can everyone with the color profile issue try the latest insiders from https://code.visualstudio.com/insiders/ , which has a potential fix for the issue. Thanks!

Windows 10, Insiders 1.41.0-insider looks exactly the same as 1.40.0 as shown in my comment https://github.com/microsoft/vscode/issues/84154#issuecomment-551248418

[nguyentanphu]

Definitely the color seems to be dimmer. Any workaround except downgrading? :(

[extratype]

For Windows users add these settings

{
  "editor.disableLayerHinting": true,
  "window.titleBarStyle": "native",
}

It's being discussed in #84214.

[nklmilojevic]

Can we have a separate issue for the font problems for macOS (Catalina)? Seems like most of these fixes are related only for Windows/or color degradation.

[bpasero]

I am going to close this issue as a fix has been rolled out both to our recovery release (coming this week) as well as insiders where the fix can be tested.

Nevertheless, there are still issues floating around from the Electron 6 update that are either independent from this issue or just another regression that we have not fully understood yet. The most likely issue you are still seeing is captured in https://github.com/microsoft/vscode/issues/84214 where fonts appear blurry. I suggest to move the discussion over to that issue for users seeing it.

If you think that your issue is not captured by https://github.com/microsoft/vscode/issues/84214 and still not fixed in latest insider release (https://code.visualstudio.com/insiders/) then I ask you to please report a new issue and be as descriptive as possible.

Thanks 👍

[nklmilojevic]

Btw. I was able to replicate old font settings from 1.39.2 on 1.40 by installing vscode-custom-css and loading this custom css:

body,
.editor {
  -webkit-text-stroke: .05em;
}

I would hate to use this hack all the time, but it would be really nice if we can set text-stroke option via VSCode directly.

[Geobert]

Testing insider and I don't agree that the issue is fixed:
up is 1.39.2 and down is
Version: 1.41.0-insider
Commit: 27cd33d891eb23e370b672e751be9fe8b3748ac1
Date: 2019-11-08T19:12:35.358Z
Electron: 6.1.4
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Windows_NT x64 10.0.18362

The color is still dimmed compared to 1.39.2.

[dhowden]

@bpasero @deepak1556 1.39.2 and 1.41-insider are not the same colour profile on my machine, the 1.39.2 rendering is still brighter. How are you verifying that they are the same? Would like to run the test on my machine.

1.39.2

1.41-insider

Version: 1.41.0-insider
Commit: 27cd33d891eb23e370b672e751be9fe8b3748ac1
Date: 2019-11-08T19:11:22.061Z
Electron: 6.1.4
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Darwin x64 18.7.0

[bpasero]

Maybe I should have been clearer: VSCode has always been setting the following Chrome command line argument: disable-color-correct-rendering [1]. Unfortunately due to some changes I pushed during the milestones, this flag was no longer applied correctly (see https://github.com/microsoft/vscode/pull/84320 for more context). Meanwhile insiders got a fix to bring back this flag properly as it used to be.

Closing this issue means we have a chance to signal that a change was made and that we can verify it. It does not mean (as I stated in my comment before) that all the regressions from the Electron 6 update are solved yet. As such, I asked for creating new issues for the remaining color/font problems you see. Thanks!

[1] More context:

• https://github.com/Microsoft/vscode/issues/51791
• https://docs.google.com/document/d/1jMokB_OBkZVELu22li8vnHxAUoL1eGnLedP-1Gttv40/edit
• https://github.com/electron/electron/issues/10732

[jesperjohansson]

Temp. font color issue fix for MacOS:

• Open command palette and type "Configure Runtime Arguments" to open the argv.json file
• Set "disable-color-correct-rendering" to false and save
• Restart VSCode entirely (not just reload window)

// argv.json
{
  "disable-color-correct-rendering": false
}

[MariuzM]

So color is one thing what about getting thin font rendering?

[rmtracey]

It's good that there's still an open issue for the blurriness, but is there an open issue for the colors anywhere? None of the suggestions in this thread have fixed the dull colors for me, and they're still dull on the Insiders build as well. Or do the dull colors and blurriness have the same root cause (as in fixing the blurriness will fix the colors)?

[MariuzM]

It's good that there's still an open issue for the blurriness, but is there an open issue for the colors anywhere? None of the suggestions in this thread have fixed the dull colors for me, and they're still dull on the Insiders build as well. Or do the dull colors and blurriness have the same root cause (as in fixing the blurriness will fix the colors)?

This fixed the colors "disable-color-correct-rendering": false

[rmtracey]

It's good that there's still an open issue for the blurriness, but is there an open issue for the colors anywhere? None of the suggestions in this thread have fixed the dull colors for me, and they're still dull on the Insiders build as well. Or do the dull colors and blurriness have the same root cause (as in fixing the blurriness will fix the colors)?

This fixed the colors "disable-color-correct-rendering": false

In the argv.json? I tried that, didn't work for me. Going by the comments in this thread it seems like that only fixes the issue for some people, not all.

[bpasero]

@rmtracey can you try how it looks like on insiders?

Can you try to reproduce with our nightly insider builds? You can give our preview releases a try from: https://code.visualstudio.com/insiders/

[rmtracey]

@bpasero Yup, I've tried insiders. 1.41.0-insider, Windows 10 1809. Colors are still dull and blurry compared to 1.39.2, no matter what I set disable-color-correct-rendering to. I've tried true, false, and "active", no difference.

[bpasero]

@rmtracey (any anyone else), it is crucial that you keep the file as it used to be for this to work, the only correct value is:

"disable-color-correct-rendering": true

So please anyone that is still seeing this issue in insiders, make sure you have it configured as such.

Finally please feel free to report a new issue if you can still reproduce and we can follow up there.

[MariuzM]

@rmtracey (any anyone else), it is crucial that you keep the file as it used to be for this to work, the only correct value is:

"disable-color-correct-rendering": true

So please anyone that is still seeing this issue in insiders, make sure you have it configured as such.

Finally please feel free to report a new issue if you can still reproduce and we can follow up there.

? For me only using in 1.40 "disable-color-correct-rendering": false fixed the washed out colors.
Only issue I'm still having is thin fonts.
Mojave

[bpasero]

We still have https://github.com/microsoft/vscode/issues/82109 for thin font rendering.

I think this thread is going into weird directions, I am going to lock it and put one last comment so that people can find a resolution quickly:

You can benefit from a fix now if you use VSCode Insiders 1.41.0 (https://code.visualstudio.com/insiders/) and configure "disable-color-correct-rendering": true (this should be the default). If you change this value, it is only applied after a restart.

This fix will roll out to VSCode stable this week.

If you still see an issue where colors look washed out, feel free to report as new issue.