Text is abnormally thin when setting allowTransparency=true with webgl renderer (even when color is opaque)

[JasonXJ]

Text rendering is abnormally thin when allowTransparency=true with the webgl renderer even when the background color is completely opaque.

allowTransparency=false:

allowTransparency=true:

I think this is also mentioned in this comment in another bug.

Details

• Browser and browser version: Chrome 106.0.5249.119
• OS version: Linux (Debian)
• xterm.js version: ToT @ 376f0d9

Steps to reproduce

1. Run the demo page
2. Set theme to light and font family to "Noto Sans Mono"
3. Execute echo -e '\033[33mhello world\033[m'
4. Observe that the rendering is OK
5. Check the "allowTransparency" toggle
6. Reload the webgl addon because the rendering is messed up: Uncheck and then check the webgl checkbox under "Addon". (I believe reloading the addon is NOT what is causing problem here)
7. Observe that the "hello world" text is abnormally thin

Note that the light theme have a completely opaque background, so the rendering theoretically should just be the same.

[Tyriar]

I thought maybe this was the clear threshold stuff not playing nice with allowTransparency but I think we disable it completely there 🤔

xterm.js/src/browser/renderer/shared/TextureAtlas.ts

Lines 601 to 607 in 1b13127

	// Clear out the background color and determine if the glyph is empty.
	let isEmpty: boolean;
	if (!this._config.allowTransparency) {
	isEmpty = clearColor(imageData, backgroundColor, foregroundColor, enableClearThresholdCheck);
	} else {
	isEmpty = checkCompletelyTransparent(imageData);
	}

[biberklatsche]

Hi @Tyriar,
I have the same problem, but I found a workaround. Maybe this helps to fix the problem.

If I bind XTerm to an html element, load the WebglAddon, remove this element and bind it again to another element, the text is rendered correctly.

    const terminal = new Terminal(...)
    const div = document.createElement('div1');
    document.body.append(div1);
    terminal.open(div1);
    terminal.loadAddon(new WebglAddon())
    document.body.removeChild(div1);
    const div2 = document.createElement('div2');
    terminal.open(div2);

OS: Windows 10
XTerm: 5.0.0
WebGL-Addon: 0.13.0
Browser: Chromium 102.0.5005.61

[biberklatsche]

Hi @Tyriar, I have the same problem, but I found a workaround. Maybe this helps to fix the problem.

If I bind XTerm to an html element, load the WebglAddon, remove this element and bind it again to another element, the text is rendered correctly.

    const terminal = new Terminal(...)
    const div = document.createElement('div1');
    document.body.append(div1);
    terminal.open(div1);
    terminal.loadAddon(new WebglAddon())
    document.body.removeChild(div1);
    const div2 = document.createElement('div2');
    terminal.open(div2);

OS: Windows 10 XTerm: 5.0.0 WebGL-Addon: 0.13.0 Browser: Chromium 102.0.5005.61

Ahh, I noticed that in that case the DomRenderer is used and not the WebglRenderer. 🤦‍♂️🤦‍♂️🤦‍♂️