Terminal is blurry

[stefan-png]

Issue Type: Bug

The built-in terminal gets blurry the closer to the centre of the screen you go. Very visible when there are big blocks of text in the terminal. attatched is a screenshot of the terminal in light mode, the two cropped 1's are different. the one in the middle is blurrier. Please fix, it makes it hard to look at errors.

VS Code version: Code 1.51.1 (e5a624b, 2020-11-11T01:11:34.018Z)
OS version: Darwin x64 19.6.0

System Info

Item	Value
CPUs	Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz (4 x 2500)
GPU Status	2d_canvas: enabled flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled metal: disabled_off multiple_raster_threads: enabled_on oop_rasterization: enabled opengl: enabled_on protected_video_decode: unavailable_off rasterization: enabled skia_renderer: disabled_off_ok video_decode: enabled webgl: enabled webgl2: enabled
Load (avg)	4, 3, 2
Memory (System)	4.00GB (0.06GB free)
Process Argv	--crash-reporter-id 4bf860e4-157d-4240-bfb1-cd2b583866ec
Screen Reader	no
VM	0%

Extensions (2)

Extension	Author (truncated)	Version
cpptools	ms-	1.1.3
shader	sle	1.1.4

[meganrogge]

1. When did this start happening?

2. What do you mean by:

"the closer to the centre of the screen you go?"

3. I'm not able to reproduce this. Have you tried zooming in and out and changing the renderer type?

[ntrf]

This problem might only be visible with non-integer zoom factors and/or non-integer device scale factor. In my case with zoom 150% terminal window displayed as canvas of size 1298 pixels wide while an element has 865px width set in style. The result is blury in the middle of the window.

Here is canvas element in question in developer tools:

<canvas class="xterm-text-layer" style="z-index: 0;width: 865px;height: 224px;" width="1298" height="336"></canvas>

If i change style to have width 865.333333333px ( = 1298 / 150%), then result is sharper and most digits look the same:

It seems like xterm.js does too much rounding when computing styles, although comments in code claim that it's necessary to reduce blur. https://github.com/xtermjs/xterm.js/blob/master/src/browser/renderer/Renderer.ts#L168-L211

[stefan-png]

@meganrogge I first noticed it this week when I began getting long errors in my terminal while rewriting my vulkan app. I definetly did change my zoom and appearance settings.
In the terminal window, the text is blurry in the centre of the window. Along the sides, the text is clear.

To recreate it, set renderer type to canvas, resize VS code and zoom in/out with the terminal open until terminal blurs.

DOM renderer seems not blurry. Imma just start using DOM renderer

[danielhuang]

Can this be reopened? I am also experiencing this issue.

[meganrogge]

please open a new issue @danielhuang if it is different from this and doesn't resolve with my above reccomendations.

[danielhuang]

It appears to be the same issue, as it is (temporarily) resolved if I make the edits as described by @ntrf in the developer tools.