Terminal is sometimes blurry, even when window.zoomLevel is 0

[beaudoco]

We have written the needed data into your clipboard because it was too large to send. Please paste.

[vscodebot]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• the new update issue (#84490)
• Change Terminal Text Colors (#83413)
• theme error (#83636)
• Relative Path (#84165)
• Too slow (#84820)

[egamma]

/needsMoreInfo

Please provide a screenshot that illustrates the problem.

[vscodebot]

Thanks for creating this issue! We figured it's missing some basic information or in some other way doesn't follow our issue reporting guidelines. Please take the time to review these and update the issue.

Happy Coding!

[ghost]

This is occurring for me too, here are screenshots comparing the output window to the terminal window, note the terminal version is blurry. the images are not inline as github does some scaling on image:

Clear Output: https://user-images.githubusercontent.com/50384876/69197798-a3cf0c80-0b86-11ea-8e3d-a80bebfcf1bb.png

Blurry Terminal: https://user-images.githubusercontent.com/50384876/69197799-a7629380-0b86-11ea-9a5c-3ed0228f87d3.png

Additional terminal settings:
"terminal.integrated.scrollback": 10000,
"terminal.integrated.fontFamily": "Courier New",
"terminal.integrated.fontSize": 16,
"terminal.external.linuxExec": "gnome-terminal",
"terminal.explorerKind": "external",

Edit: Oddly it seems to get blurrier to the middle of the terminal line, I had a colleague double check in-case my eyes were going bad:
https://user-images.githubusercontent.com/50384876/69198455-daa62200-0b88-11ea-924c-89b0aa676473.png

[beaudoco]

@tick-rick has some great examples attached, I can attach some more if these were not enough.

[Tyriar]

Do you set window.zoomLevel?

[beaudoco]

Here is a screenshot of my terminal, It does seem to be getting worse the closer to the center of the screen it gets. The zoom level is set to 1.

[ghost]

I had my zoomlevel set to -1, it seems setting it to 0 fixes the blurryness, very odd.

[Tyriar]

This is expected, we can't guarantee non-blurriness in this case because there's a 1-off rounding error that I don't think is specced out as browser zoom is not a web platform feature.

[kbolino]

Since it seems all other issues are being closed as a duplicate of this one, I will put my comment here. On VSCode 1.50.1 on Linux, this is happening at window.zoomLevel = 0 but not at window.zoomLevel = -1 though the latter makes everything a little too small. Switching to the dom renderer also resolves the issue. I've tested with both the default font and my preferred font "Source Code Pro" and it happens in both cases.

Note that what I'm saying here is that the defaults are causing blurriness and only by overriding the defaults can I make the terminal not appear blurry.

[nplatis]

I confirm the issue about the terminal font being blurry at the middle of the line at 1920x1080 resolution. Below some window size the blurriness disappears.
Zoom level 0, font Cascadia Mono or Consolas. Happens only with the canvas renderer.

[uhthomas]

Thought it was worth mentioning I'm also seeing the same thing. Both the canvas and experimentalWebgl renderers produce blurry text in the terminal.

config.json

{
    "editor.fontSize": 20,
    "editor.fontFamily": "Fira Code Retina, Consolas, 'Courier New', monospace",
    "editor.cursorBlinking": "smooth",
    "editor.fontLigatures": true,
    "workbench.iconTheme": "Monokai Pro Icons",
    "workbench.colorTheme": "Monokai Pro",
    "files.insertFinalNewline": true,
    "workbench.editor.enablePreview": false,
    "workbench.editor.closeEmptyGroups": false,
    "terminal.integrated.shellArgs.linux": [
        "-l"
    ],
    "terminal.integrated.rendererType": "dom"
}

Reproduces on latest VS Code for Windows.

[carlfriedrich]

Having the same issue on Windows. The amount of blurryness changes when the terminal window is resized slightly, see screenshot:

Zoomed in:

This happens with "window.zoomLevel": 0 and all extensions disabled.

"terminal.integrated.rendererType": "dom" does not work (VS code says "unkown configuration setting").

"terminal.integrated.gpuAcceleration": "off" however fixes the blurryness for me.

[carlfriedrich]

Addendum: While - like I posted above - "terminal.integrated.gpuAcceleration": "off" indeed fixes the blurryness, it induces another problem (unsurprisingly): the terminal becomes unbearably slow.

So working without GPU acceleration is not an option, apparently. The blurryness is really bugging me, though. What can we do about it? I am totally willing to help fixing this. Is anybody working on it atm?

[Tyriar]

@carlfriedrich no one's working on it, the action item here is to reproduce the problem in the xterm.js demo and investigate a fix.

Here's the upstream issue tracking the general problem of blurriness (with or without zoom level) xtermjs/xterm.js#2662.

I suspect this is the relevant code:

• Canvas renderer: https://github.com/xtermjs/xterm.js/blob/6c18b7f2cc91b923e765b03e572f9038e294d368/src/browser/renderer/Renderer.ts#L199-L213
• Webgl renderer: https://github.com/xtermjs/xterm.js/blob/6c18b7f2cc91b923e765b03e572f9038e294d368/addons/xterm-addon-webgl/src/WebglRenderer.ts#L459-L481

[carlfriedrich]

@Tyriar thanks for the quick reply. I will try to reproduce the behavior with xterm.js.

In a quick direct comparison in VS Code between GPU and non-GPU rendering, I noticed that the font looks a bit condensed when GPU acceleration is enabled:

Might that be a hint to something?

[Tyriar]

@carlfriedrich I suspect you may be using the canvas renderer, because of how the w in PowerShell is cut off on the right in your screenshot (I could be wrong though). The WebGL renderer is much better, using "on" should force the webgl renderer which may improve the looks, lack of hardware support could be causing that if so.

[Tyriar]

Non-GPU renderer just uses elements, so the characters are blended together just like any other web document.

[carlfriedrich]

@Tyriar Thanks for coming back on this. You mean I should set terminal.integrated.gpuAcceleration to on? I tried that and it does not affect the rendering in my case, just looks identical to auto and canvas. The only choices I have here are:

• on
• auto
• canvas
• off

The first three all result in the same rendering. I am on VS Code 1.63.2.

[carlfriedrich]

@Tyriar I think I was able to reproduce at least part of the behaviour directly with xterm.js, see my comment there.

An observation is that the blurryness only occurs with the canvas renderer, not with the dom renderer. Why is the dom renderer not available in VS code? What are the differences?

[carlfriedrich]

In another upstream comment I found out that the problem in my case is tied to Windows's DPI scaling setting. I am using a DPI scaling of 125%.

My observations above from three weeks ago were taken with this DPI scaling as well. I can confirm that the displayed behaviour does not occur with a DPI scaling of 100%.

However, when I set a scaling factor of 125% in VS Code instead, the behaviour is back. So it does not seem to make a difference, where the scaling is set. Scaling just leads to blurry rendering in any case.

[Tyriar]

Why is the dom renderer not available in VS code?

@carlfriedrich dom renderer is used when you set gpuAcceleration to off.

[carlfriedrich]

I did some research on this topic and documented it along with a proposal for a solution in the upstream issue.

For now, the only workaround to have a guaranteed crisp font in the terminal is the one proposed by @YuanfengZhang in a comment above: Set your VS code zoom level in a way that the overall zoom level results in 100% when multiplied by your Windows DPI zoom level.

Examples:

1. Windows DPI zoom level 100% -> set VS Code zoom level to 100%.
2. Windows DPI zoom level 125% -> set VS Code zoom level to 80%.
3. Windows DPI zoom level 150% -> set VS Code zoom level to 67%.

Only then the terminal does not apply any zooming, resulting in a crisp font.

I hope that my proposal can be implemented, though, then we would be able to have crisp fonts on common zoom levels as well.

[YoungElPaso]

For what it's worth, I found that using the Nerd Font 'CaskaydiaCove NF' was actually the main culprit of having blurry text - adding Cascadia Code back to the top of the font-stack list in settings made an immediate difference - I'm guessing this is because it handles weights better.

As a bonus, which I didn't realize beforehand, the glyphs that I wanted a Nerd Font for (Git symbols etc) will still be handled by the nerd font, while most normal characters will be handled by Cascadia Code - so the best of both worlds, and generally clear.

E..g.

The screenshot doesn't really do it justice, probably from some compression, but using a better font certainly helps.

[Tyriar]

Adding verified as there is a test plan item associated with this one #158833