Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1.40 update: Font rendering is blurry (Linux, Windows) #84214

Closed
varunj166 opened this issue Nov 8, 2019 · 86 comments
Closed

1.40 update: Font rendering is blurry (Linux, Windows) #84214

varunj166 opened this issue Nov 8, 2019 · 86 comments

Comments

@varunj166
Copy link

@varunj166 varunj166 commented Nov 8, 2019

  • VSCode Version: 1.40
  • OS Version: Windows 7 64-bit

Steps to Reproduce:

  1. Open VS Code.
  2. Look at editor window.

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

I updated my video card drivers, and tried a complete uninstall re-install. Neither fixed the issue.

I was able to restore the normal font sharpness by downgrading back to 1.39.2. This tells me that something definitely changed with the font rendering in 1.40.

(The difference was subtle, but enough to be annoying, considering we look at these windows for hours on end. Gotta be sharp!)

UPDATE: Screenshots -- Hopefully you can see the difference.

1.39.2
vs-code-1 39 2

1.40.0
vs-code-1 40 0

@rigobauer

This comment has been minimized.

Copy link

@rigobauer rigobauer commented Nov 8, 2019

Same problem here with Macbook (MacOS Mojave 10.14.6)

@varunj166

This comment has been minimized.

Copy link
Author

@varunj166 varunj166 commented Nov 8, 2019

@rigobauer Check the photos I just attached to make sure my issue is similar enough to your issue. I know MacOS have been having an issue with antialiasing that can be fixed by changing a setting that Windows users don't have access to.

@Eldaw

This comment has been minimized.

Copy link

@Eldaw Eldaw commented Nov 8, 2019

They've changed from RGB subpixel antialiasing to grayscale subpixel antialiasing for the Editor. Which unfortunately looks blurry especially on non-high-dpi LCD panels.

It also makes the colors of colored text look very washed out.

@varunj166

This comment has been minimized.

Copy link
Author

@varunj166 varunj166 commented Nov 8, 2019

@Eldaw Would that cause the difference I see? (See the photos I attached for reference.) Is there a fix that you know of?

(My monitor is 22inch 1680 x 1050 - 90.05 ppi.)

@Eldaw

This comment has been minimized.

Copy link

@Eldaw Eldaw commented Nov 8, 2019

@varunj166 Yes, that causes the difference. Use a screen magnifier to have a look closely at the text in both screenshots. In v1.39.2 you can see colored subpixels forming the antialising along the edges of the text. On the v1.40 screenshot you will see grayscale subpixels forming the antialiasing along the edges of the text.

I don't know if anything can be done for it. Maybe it's because of the upgrade to Electron 6. Anyway, I've downgraded to v1.39.2.

@bpasero

This comment has been minimized.

Copy link
Member

@bpasero bpasero commented Nov 8, 2019

This is probably #84154

@varunj166

This comment has been minimized.

Copy link
Author

@varunj166 varunj166 commented Nov 8, 2019

@bpasero Yes it is. Thank you for the reference.

@Eldaw Wow, that's... very unfortunate. Thanks for the detailed answer.

If I can ask, why would any rendering setting prefer grayscale subpixel antialiasing over RGB in a UI that's otherwise full color? Is it performance? Style choice? It seems to me its main effect is losing sharpness, which is never desirable.

@thermarthae

This comment has been minimized.

Copy link

@thermarthae thermarthae commented Nov 8, 2019

I have the same problem with 1.40 update on Windows 10.

It looks that disabling/changing position: relative at .monaco-workbench in devtools makes everything sharp again.

https://github.com/microsoft/vscode/blob/master/src/vs/workbench/browser/media/style.css#L52

@bpasero

This comment has been minimized.

Copy link
Member

@bpasero bpasero commented Nov 8, 2019

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:

@marijaninjo

This comment has been minimized.

Copy link

@marijaninjo marijaninjo commented Nov 8, 2019

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?

No, looks the same

@varunj166

This comment has been minimized.

Copy link
Author

@varunj166 varunj166 commented Nov 8, 2019

@thermarthae I see that 1.40.0 has that style rule enabled, whereas in 1.39.2 it's crossed out, but when I disable the rule in 1.40.0, I don't see anything sharpen up. How did you come to your conclusion?

@bpasero I can also confirm, the fuzziness is still there in the 1.41.0 you linked.

@bpasero

This comment has been minimized.

Copy link
Member

@bpasero bpasero commented Nov 8, 2019

/duplicate #84154

@vscodebot vscodebot bot added the *duplicate label Nov 8, 2019
@vscodebot

This comment has been minimized.

Copy link

@vscodebot vscodebot bot commented Nov 8, 2019

Thanks for creating this issue! We figured it's covering the same as another one we already have. Thus, we closed this one as a duplicate. You can search for existing issues here. See also our issue reporting guidelines.

Happy Coding!

@vscodebot vscodebot bot closed this Nov 8, 2019
@bpasero bpasero reopened this Nov 8, 2019
@bpasero bpasero added font-rendering and removed *duplicate labels Nov 8, 2019
@bpasero bpasero changed the title Editor font appears slightly fuzzy (blurry?) with the October 1.40 update 1.40 update: Font rendering is blurry Nov 8, 2019
@bpasero

This comment has been minimized.

Copy link
Member

@bpasero bpasero commented Nov 8, 2019

I am reopening this issue as I believe it may not be the same as #84154 but rather is about the font appearing blurry and not crisp anymore.

@bpasero bpasero changed the title 1.40 update: Font rendering is blurry 1.40 update: Font rendering is blurry (Linux, Windows) Nov 8, 2019
@alexdima

This comment has been minimized.

Copy link
Member

@alexdima alexdima commented Nov 13, 2019

Because this issue contains complaints about multiple areas (not just the code editor), to fix the grayscale rendering in all the places, more changes are needed.

For the recovery release, we have opted to have a smaller, targeted fix for the code editor text. This is tracked in #84698

@i6mi6

This comment has been minimized.

Copy link

@i6mi6 i6mi6 commented Nov 13, 2019

I set "workbench.fontAliasing": "antialiased" and it seemed to help a little

@nklmilojevic

This comment has been minimized.

Copy link

@nklmilojevic nklmilojevic commented Nov 13, 2019

@alexandrudima as I commented here #84698 (comment) it doesn't fix it on macOS Catalina.

@varunj166

This comment has been minimized.

Copy link
Author

@varunj166 varunj166 commented Nov 14, 2019

@zxdx @bhughes339 On the most current insider's build, yes the two fixes do work for me also. There must have been something going on with that one insider's build we tried on. Anyway, I think the dev's now have enough info to sort this out. For now, I've no reason to switch away from 1.39.2.

@deepak1556

This comment has been minimized.

Copy link
Contributor

@deepak1556 deepak1556 commented Nov 14, 2019

@alexandrudima pushed a fix for the editor fonts in today's recovery stable release, please update your stable, remove the workarounds mentioned in this thread and verify if the fonts are better. Thanks!

@nklmilojevic

This comment has been minimized.

Copy link

@nklmilojevic nklmilojevic commented Nov 14, 2019

Removed the workarounds and here is 1.39.2 vs 1.40.1 in a gif, the fonts are still thinner in 1.40.1.

vscode

It is the same as in 1.40.0.

@varunj166

This comment has been minimized.

Copy link
Author

@varunj166 varunj166 commented Nov 14, 2019

@deepak1556 @alexandrudima 1.40.1 (latest stable) looks good on my Windows 7 x64, at least in terms of subpixel AA. I'll have to take your word for it that nothing else about the editor text rendering is different with the fixes you applied in this version. My eyes are getting very tired from staring at edges of lettering on my screen from 5 inches away.

@zxdx

This comment has been minimized.

Copy link

@zxdx zxdx commented Nov 14, 2019

1.40.1 looks good to me. Per pixel comparison with 1.39.2 shows no differences for the editor area.

@felipebraga

This comment has been minimized.

Copy link

@felipebraga felipebraga commented Nov 14, 2019

Integrated Terminal still blurry 1.40.1.

ZSH
image

Bash
image

@alexdima

This comment has been minimized.

Copy link
Member

@alexdima alexdima commented Nov 19, 2019

To sum things up:


1. The state of VS Code Stable 1.40.x

Just a couple of fixes have been backported to the stable branch and are available in 1.40.1. Not all areas in our UI have been fixed in 1.40.1 because we have found that to be too risky. If you are on 1.40.x and are not happy with the antialiasing, then please switch to Insiders which contains a lot more fixes.


2. The state of VS Code Insiders

The first build that has all the changes related to antialiasing is 29b99f85e54aa5af6cd4edf918a67d4f70a10aea (2019-11-19T10:22:27.162Z) from one hour ago. Please make sure to update to it and then please make sure to remove "editor.disableLayerHinting" from your settings, it is no longer necessary. As far as we are aware, all issues caused by our update to Electron 6.x have been resolved starting with this Insiders build.

If you have updated to the latest insiders version and continue to be unhappy with the font antialiasing, please open a new issue. It is possible we have missed something, but we believe we are now as good (or better) as we were in 1.39.x.


TL;DR Update to latest insiders, remove workarounds from your settings and file new specific issues about what area doesn't look good for you. If you are on 1.40.1 and feel unhappy with the antialiasing, switch to insiders.

@alexdima alexdima closed this Nov 19, 2019
@deepak1556 deepak1556 mentioned this issue Dec 3, 2019
20 of 21 tasks complete
@roblourens roblourens added the verified label Dec 5, 2019
@clementlesne

This comment has been minimized.

Copy link

@clementlesne clementlesne commented Dec 16, 2019

Hello, the 1.41.0 is still blurry for me. I'm on the latest Fedora 31 Gnome Wayland.

Others details:
Version: 1.41.0
Commit: 9579eda
Date: 2019-12-11T18:32:17.711Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Linux x64 5.3.15-300.fc31.x86_64

@dvic

This comment has been minimized.

Copy link

@dvic dvic commented Dec 17, 2019

For me the terminal is also still blurry

Version: 1.41.0
Commit: 9579eda04fdb3a9bba2750f15193e5fafe16b959
Date: 2019-12-11T17:58:38.338Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Darwin x64 18.7.0
@felipebraga

This comment has been minimized.

Copy link

@felipebraga felipebraga commented Dec 17, 2019

It's better, but still blurry.

Version: 1.41.0
Commit: 9579eda04fdb3a9bba2750f15193e5fafe16b959
Date: 2019-12-11T18:32:17.711Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Linux x64 5.4.2-1-MANJARO
@vscodebot vscodebot bot locked and limited conversation to collaborators Jan 6, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.