From 96634298e490b954833f2df95a3b9a19298fe2c8 Mon Sep 17 00:00:00 2001 From: David Lechner Date: Wed, 5 Jul 2023 16:23:52 +0000 Subject: [PATCH] use border-bottom instead of box-shadow for underline cursor In rare cases, box-shadow can cause aliasing artifacts on the top and sides of the cursor box when only the bottom should be filled in to create an underline. This replaces the box-shadow style with border-bottom which should be pixel perfect in all cases. Fixes: https://github.com/xtermjs/xterm.js/issues/4580 --- src/browser/renderer/dom/DomRenderer.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts index 54711ed8..e84b43ba 100644 --- a/src/browser/renderer/dom/DomRenderer.ts +++ b/src/browser/renderer/dom/DomRenderer.ts @@ -168,7 +168,7 @@ export class DomRenderer extends Disposable implements IRenderer { styles += `@keyframes blink_box_shadow` + `_` + this._terminalClass + ` {` + ` 50% {` + - ` box-shadow: none;` + + ` border-bottom-style: hidden;` + ` }` + `}`; styles += @@ -205,7 +205,9 @@ export class DomRenderer extends Disposable implements IRenderer { ` box-shadow: ${this._optionsService.rawOptions.cursorWidth}px 0 0 ${colors.cursor.css} inset;` + `}` + `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_UNDERLINE_CLASS} {` + - ` box-shadow: 0 -1px 0 ${colors.cursor.css} inset;` + + ` border-bottom: 1px ${colors.cursor.css};` + + ` border-bottom-style: solid;` + + ` height: calc(100% - 1px);` + `}`; // Selection styles +=