Theia: Terminal has a white border in Firefox on Mac

[csweichel]

Description

The white border around the terminal probably is not intentional, and does not look nice.

Reproduction Steps

Open Theia (e.g. a Gitpod) in Firefox on Mac.

OS and Theia version:
Theia next on OSX 10.14.2, Firefox 66.0

Diagnostics:
It seems to be related with the box-sizing of the .p-Widget CSS class. When I remove this property, the border goes away.

[vince-fugnitto]

dupp of #3472
@32leaves does the problem occur consistently for you?

[jankeromnes]

This is https://github.com/xtermjs/xterm.js/issues/1974

[jankeromnes]

@vince-fugnitto and yes, the problem occurs consistently (for me at least, in Firefox Nightly on Mac).

I can make it go away by resizing the terminal just right, but if the size changes again it comes back. Also, there are particular widths at which it gets worse, and a combination of top/left/bottom borders appear (that you usually can't get rid of unless you also change the width).

I've tracked it down to xtermjs's .xterm-text-layer canvas layer, but didn't get further than that.

[vince-fugnitto]

@jankeromnes I was able to reproduce as well but could not find a proper fix for it unfortunately :disappointed:
It's good you narrowed it down.

[svenefftinge]

someone should try https://github.com/xtermjs/xterm.js/issues/1974#issuecomment-484672171

[jankeromnes]

The suggested workaround didn't work for Theia, but here is a workaround that seems to do the trick:

.xterm .xterm-screen canvas {
  /* fix random 1px white border on terminal in Firefox */
  border: 1px solid #1e1e1e;
}

If there really is no way to fix this in XtermJS, maybe Theia can figure out whatever background color should be used (#1e1e1e in my example), and set it as a xterm canvas border too?