diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts index 8b955cd4..0fff23ed 100644 --- a/src/browser/renderer/dom/DomRenderer.ts +++ b/src/browser/renderer/dom/DomRenderer.ts @@ -37,6 +37,7 @@ export class DomRenderer extends Disposable implements IRenderer { private _terminalClass: number = nextTerminalId++; private _themeStyle!: IStyleSheet; + private _dimensionsStyle!: IStyleSheet; private _rowContainer: HTMLElement; private _rowElements: HTMLElement[] = []; private _selectionContainer: HTMLElement; @@ -92,6 +93,7 @@ export class DomRenderer extends Disposable implements IRenderer { this._rowContainer.remove(); this._selectionContainer.remove(); this._themeStyle.dispose(); + this._dimensionsStyle.dispose(); this._widthCache.dispose(); })); @@ -123,6 +125,19 @@ export class DomRenderer extends Disposable implements IRenderer { element.style.overflow = 'hidden'; } + if (!this._dimensionsStyle) { + this._dimensionsStyle = createStyle(this._screenElement); + } + + const styles = + `${this._terminalSelector} .${ROW_CONTAINER_CLASS} span {` + + ` display: inline-block;` + // TODO: find workaround for inline-block (creates ~20% render penalty) + ` height: 100%;` + + ` vertical-align: top;` + + `}`; + + this._dimensionsStyle.setCss(styles); + this._selectionContainer.style.height = this._viewportElement.style.height; this._screenElement.style.width = `${this.dimensions.css.canvas.width}px`; this._screenElement.style.height = `${this.dimensions.css.canvas.height}px`;