Rendering issues for one eight block characters in Terminal

[willmcgugan]

Type: Bug

There are a few rendering issues related to the one eight block unicode characters in the vscode terminal, as used for scrollbars and lines.

The following is a screenshot of an app in the vscode terminal. I have highlighted where the rendering isn't quite right. I suspect there is more than one issue here. It looks like their is both a sub-pixel glitch and maybe a block char renders outside of a cell.

The following is iTerm on MacOS. Other terminals look much the same.

I've zoomed in the exaggerate the effect, but the issue is present on more typical zoom levels.

VS Code version: Code 1.71.2 (74b1f97, 2022-09-14T21:07:15.900Z)
OS version: Darwin arm64 21.6.0
Modes:
Sandboxed: No

System Info

Item	Value
CPUs	Apple M1 Pro (10 x 24)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled metal: disabled_off multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_renderer: enabled_on video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off
Load (avg)	4, 4, 4
Memory (System)	16.00GB (0.06GB free)
Process Argv	--crash-reporter-id 708fb231-9126-40c3-a471-56c4901cf66d
Screen Reader	no
VM	0%

Extensions (48)

Extension	Author (truncated)	Version
vscode-sqlite	ale	0.14.1
vscode-color	ans	0.4.5
vscode-database	baj	2.2.3
vscode-django	bat	1.10.0
better-toml	bun	0.3.2
vscode-svgviewer	css	2.0.0
vscode-eslint	dba	2.2.6
xml	Dot	2.5.1
vsc-material-theme	Equ	33.5.0
vsc-material-theme-icons	equ	2.4.0
prettier-vscode	esb	9.8.0
code-runner	for	0.11.8
vscode-pull-request-github	Git	0.50.0
sass-lint	gle	1.0.7
gc-excelviewer	Gra	4.2.55
vscode-peacock	joh	4.2.1
chat	kar	0.35.0
restructuredtext	lex	189.2.0
dotenv	mik	1.0.1
theme-monokai-pro-vscode	mon	1.1.21
black-formatter	ms-	2022.5.12591021
python	ms-	2022.14.0
vscode-pylance	ms-	2022.9.20
jupyter	ms-	2022.8.1002431955
jupyter-keymap	ms-	1.0.0
jupyter-renderers	ms-	1.0.9
vsliveshare	ms-	1.0.5723
vsliveshare-audio	ms-	0.1.91
vsliveshare-pack	ms-	0.4.0
color-highlight	nau	2.5.0
autodocstring	njp	0.6.1
hide-gitignored	npx	1.1.0
vetur	oct	0.36.0
austin-vscode	p40	0.10.8
material-icon-theme	PKi	4.20.0
excalidraw-editor	pom	3.3.1
vscode-commons	red	0.0.6
vscode-yaml	red	1.10.1
LiveServer	rit	5.7.9
snappify	sna	1.0.1
code-spell-checker	str	2.8.0
sass-indented	syl	1.8.22
cython	tcw	0.1.0
simple-rst	tro	1.5.2
luna-paint	Tyr	0.16.0
vscode-icons	vsc	11.17.0
markdown-all-in-one	yzh	3.4.3
material-theme	zhu	3.15.5

(3 theme extensions excluded)

A/B Experiments

vsliv368cf:30146710
vsreu685:30147344
python383cf:30185419
vspor879:30202332
vspor708:30202333
vspor363:30204092
vslsvsres303:30308271
pythonvspyl392:30443607
vserr242cf:30382550
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vshan820:30294714
vstes263:30335439
vscorecescf:30445987
pythondataviewer:30285071
vscod805:30301674
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30557514
vsaa593:30376534
pythonvs932:30410667
cppdebug:30492333
vsclangdf:30486550
c4g48928:30535728
hb751961:30553087
dsvsc012cf:30540253
azure-dev_surveyone:30548225
i497e931:30553904
fc301958:30567733

[Tyriar]

@willmcgugan can you copy and paste the content of the terminal in this state so we can get the problem characters?

[willmcgugan]

I've attached a dump of the terminal output, escape codes and all. Hope that helps.

capture.txt

[Tyriar]

Can reproduce with ▔ when zoomed in:

[Tyriar]

Upstream fix: xtermjs/xterm.js#4134

[willmcgugan]

Thanks @Tyriar I gather that fixes the long top line, but there are other rendering issues in the screenshot.

Here's vscode. Note the glitches at the top and bottom of the scrollbars.

Screen.Recording.2022-09-29.at.12.13.03.mov

Here's iTerm (other terminals look much the same).

Screen.Recording.2022-09-29.at.12.13.56.mov

I'm guessing the block characters don't quite cover the background, which is leads to this erroneous line.

[Tyriar]

@willmcgugan what do you mean at the top of the scroll bar?

I can't reproduce the bottom of the scrollbar problem:

[willmcgugan]

I should have moved the scrollbar in the txt dump. Try the following:

capture2.txt

I wonder if it related to screen resolution. It only appears at certain zoom levels, but when it does it is quite obvious. I'm also viewing this on a 4K monitor, which might be making a difference.

Here's a screen capture I've blown up a bit. Hopefully it's obvious now.

Here's the original. The difference is a line of one pixel in height, so it might not be clear unless you download this image and zoom in...

[willmcgugan]

Top of the scrollbar blown up a bit...

[Tyriar]

I see this:

@willmcgugan can you set up the xterm.js demo and see if changing these 4 lines:

https://github.com/xtermjs/xterm.js/blob/51c580e7a47dd92dc77f12fca602e76d106ec327/src/browser/renderer/CustomGlyphs.ts#L429-L432

to:

      Math.round(xOffset + box.x * xEighth),
      Math.round(yOffset + box.y * yEighth),
      Math.round(box.w * xEighth),
      Math.round(box.h * yEighth)

and see if that fixes it? You'll need node installed for this so feel free to decline, but it would make it easier to iterate on this stuff.

[connor4312]

Reopening as it sounds like there's still some ongoing fixes to be made here

[Tyriar]

Looks fixed now:

I tested both canvas and webgl on the xterm.js demo at various zoom levels on my 4k monitor.