Fonts are rendered with blur when "jumping" to some text.

[slayerxj]

• VSCode Version: 0.10.11
• OS Version: Windows 7 Enterprise 64-bit

Steps to Reproduce:

1. Press "Ctrl + =" to zoom in the view.
2. Search for some text
3. Click "F3" to jump to the "Next match"

The fonts are rendered with blur.

If I pressed "Ctrl+Home" to "reset" the rendering, then use mouse to scroll to that line, the fonts are clear and sharp.

The details of the fonts are as below:
blur:

sharp:

It seems the height of blurred font is 16px, and the "normal" font is 15px.

Because the monitor in my company is 22" 1920*1080, the default font size of VSCode is too small. Though we can modify the "editor.fontSize" setting, but the font-size of side bar will still be very small, so I think zoom in once is the most comfortable way to make text easy to read...if without this issue.

And I think it's not a duplicate of https://github.com/Microsoft/vscode/issues/4622.

[alexdima]

@slayerxj I can recomment using editor.fontSize for increased editor font size. And @bpasero we really need a setting for setting the explorer font size.

The Ctrl+= triggers a zoom similar to how it triggers a zoom in a web browser.

We use translate3d to scroll the editor, which introduces a new composition layer. This is generally a very good thing, as Chromium can render the editor independently of the other parts of the workbench. However, Chromium falls back to grayscale antialiasing in various cases, such as if a composition layer is transparent, or sits at non-integer coordinates and there was one more case which I forget now.

We always use translate3d with integer coordinates, but the zoom in of 125% makes all those nice integers into floats. So I think Chromium then falls back to grayscale anitaliasing.

The only thing I can do is to disable translate3d when using zoom in, but that will lead to slower scrolling, longer paint times, etc. IMHO we should simply provide a setting for the explorer font size.

[bpasero]

@alexandrudima would love to offer a setting to change the font for the workbench, but unfortunately we just don't have one place where we set the font. For example, all editor widgets have to define their own fonts (see https://github.com/Microsoft/vscode/blob/master/src/vs/editor/contrib/find/browser/findWidget.css#L78) because otherwise they would inherit the editor font.

This makes it very hard to just flip the CSS in one place for good.

[alexdima]

@bpasero Isn't this about font-size. i.e. not about font-family ?

[bpasero]

@alexandrudima well might be, though from another issue we have (if you run with CJK languages you might have some custom fonts installed on the system that you might want to use over the default ones we have) I thought it would also be nice to allow to set the font-family. But being able to set both seems good to me too.

[alexdima]

@bpasero I've created #5972 to look into setting the editor font only on the dom nodes that really need it instead of the top level editor dom node. This should help with not needing to reset the font again in places such as the find widget.

[bpasero]

@alexandrudima that is very cool, thanks!

[alexdima]

We don't use translate3d when the workbench is zoomed in, so the font is not blurry anymore.