Cursor foreground sits a bit lower than other text in the webgl renderer

[npezza93]

Using the webgl renderer it seems like selection highlight sits a bit lower than the canvas renderer.
Webgl:

canvas:

Here's an example where it looks like the characters drop when the cursor highlights them. Feels like the cursor needs to be moved up a few pixels.

This could perhaps be an issue with the font. Currently im using Fira Code and when using courier-new, courier, monospace the first issue doesn't happen but the second example does still happen.

Details

• Browser and browser version: electron-7.1.3
• OS version: macOS catalina
• xterm.js version: 4.3
• xterm-addon-webgl version: 0.4.0

[Tyriar]

Oh the cursor not the selection. This is because of my new favorite Chromium bug https://bugs.chromium.org/p/chromium/issues/detail?id=1026254, microsoft/vscode#84432

The reason it's different inside just the webgl renderer if because the exact same canvas is being used to render the cursor for both webgl and canvas, it's just another transparent canvas sitting on top of the webgl canvas. Same for links:

xterm.js/addons/xterm-addon-webgl/src/WebglRenderer.ts

Lines 54 to 57 in bd0d267

	this._renderLayers = [
	new LinkRenderLayer(this._core.screenElement, 2, this._colors, this._core),
	new CursorRenderLayer(this._core.screenElement, 3, this._colors, this._onRequestRefreshRows)
	];

I'll leave this open as maybe I can look into not using textBaseline middle.

[Tyriar]

Created #2614 to remove cursor canvas