Use of box-shadow for underline cusor can have aliasing issues under certain conditions

[dlech]

The use of box-shadow to create the underline cursor can sometimes not render correctly. Here is a screenshot.

Details

• Browser and browser version: Chromium Version 114.0.5735.106 (Official Build) snap (64-bit)
• OS version: Ubuntu 22.04
• xterm.js version: 5.2.1

Steps to reproduce

Unfortunately, I haven't been able to create a minimal reproducible test case. This started when we updated from blueprintjs 4.x to 5.x but I haven't been able to track down exactly what changed that triggered the issue. For the time being, the bug can be seen at https://beta.pybricks.com. Just click in the terminal area to focus it.

Suggested solution

From what I've read about box-shadow, aliasing issues like this happen sometimes. It seems like we could make a more robust cursor using border instead of box-shadow. This is the workaround I have come up with for now:

.xterm-dom-renderer-owner-1 .xterm-rows .xterm-cursor.xterm-cursor-underline {
    animation: pb-terminal-cursor 1s step-end infinite !important;
    box-shadow: none !important;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px;
    border-style: solid;
    border-color: black;

    .#{bp.$ns}-dark & {
        border-color: white;
    }
}

@keyframes pb-terminal-cursor {
    50% {
        border-style: hidden;
    }
}