Xterm.js: Random 1px white borders in Firefox in `xterm-text-layer` canvas

[jankeromnes]

Details

• Browser and browser version: Firefox Nightly
• OS version: Mac OS
• xterm.js version: Latest

Steps to reproduce

1. Visit https://xtermjs.org/ in Firefox
2. Open Devtools, set document.body.style.backgroundColor = 'black'
3. Resize the window to get the example xterm to resize

In some sizes, there is a random 1px white border (either top, bottom, left, right, or a combination of those). E.g.:

(bottom)

(top)

This line looks like some off-by-one error. I also believe the error is only inside this canvas:

<canvas class="xterm-text-layer" style="z-index: 0; width: 720px; height: 384px;" width="1440" height="768"></canvas>

(Deleting the others doesn't impact the white lines, while deleting this one removes all white lines.)

[Tyriar]

Could not repro this on Firefox 63, 65 and 66 on Windows 10.

[Tyriar]

I saw it once on macOS but not again, seems pretty hard to repro 🤔

[jankeromnes]

It happens consistently for me on https://gitpod.io (which uses xtermjs for its terminal) on Mac OS in Firefox Nightly.

Please let me know if I can do anything to help debug this.

[rhamilto]

I'm seeing this issue and working around it with the following CSS:

.xterm .xterm-screen canvas {
  // fix bug where 1px white stripe appears atop terminal in Firefox
  border-right: 1px solid transparent;
}

[jankeromnes]

Thanks for the tip @rhamilto! Unfortunately, playing with transparent borders on .xterm-screen canvas did not work around the issue in my Firefox Nightly on MacOS:

EDIT: Ah, except when I use border: 1px solid <same color as the background>, apparently. Maybe all Xterm installs should use this workaround, but I'd really prefer to find a way to properly fix this in Xterm itself.

[lramos15]

Unable to repro on Firefox nightly on MacOS.

[jankeromnes]

@lramos15 @Tyriar FYI this bug still reproduces for me (Firefox Nightly on MacBook Pro):

https://youtu.be/minfGofKJ8c

[imdurgadas]

Issue still happens, can we have a fix please.. This is bad from User experience.

OS: Mac
Browser: Firefox 79.0

[jankeromnes]

FYI, in Eclipse Theia and Gitpod.io we ended up using a CSS hack as workaround for this issue:

https://github.com/eclipse-theia/theia/issues/4665#issuecomment-494699663

https://github.com/eclipse-theia/theia/blob/8d8406d52b74b4fc03b4919a1299dc572b1e3bd5/packages/terminal/src/browser/style/terminal.css#L24-L27

[Tyriar]

I'm good to accept a PR for the hack as long as the reason for it is called out in a comment. Since it needs the background color it will need to be set in JS instead of CSS.

[flippy84]

Saw this bug with Firefox 82.0.2 and managed to reproduce it with the following code:

index.txt

If the padding instead is changed to 4px instead of 4pt the border disappears. Easiest way I found to reproduce the issue was to switch back and forth between another tab.

[rivelbab]

I changed the rendererType to dom to resolve this in firefox (linux OS).