From 579a0a530f8b81fa0269858f3a45f07a8c54d754 Mon Sep 17 00:00:00 2001 From: Anthony Kim Date: Tue, 17 Feb 2026 14:47:43 -0800 Subject: [PATCH] Fix image addon overriding screen element z-index --- addons/addon-image/src/ImageRenderer.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/addons/addon-image/src/ImageRenderer.ts b/addons/addon-image/src/ImageRenderer.ts index 2d10a269..53a0a9c9 100644 --- a/addons/addon-image/src/ImageRenderer.ts +++ b/addons/addon-image/src/ImageRenderer.ts @@ -340,19 +340,22 @@ export class ImageRenderer extends Disposable implements IDisposable { ); canvas.classList.add(`xterm-image-layer-${layer}`); const screenElement = this._terminal._core.screenElement; + // Use isolation to create a stacking context without overriding z-index, + // which would conflict with integrators (e.g. VS Code) that set their + // own z-index on the screen element. + screenElement.style.isolation = 'isolate'; if (layer === 'bottom') { // Use z-index:-1 so it paints behind non-positioned text elements. - // The screen element needs to be a stacking context to contain the - // negative z-index, otherwise it would go behind the entire terminal. + // The screen element needs to be a stacking context (via isolation) + // to contain the negative z-index, otherwise it would go behind the + // entire terminal. canvas.style.zIndex = '-1'; - screenElement.style.zIndex = '0'; screenElement.insertBefore(canvas, screenElement.firstChild); } else { // Explicit z-index ensures the image canvas reliably stacks above // the text layer (DOM renderer rows). z-index: 0 is below the // selection overlay (z-index: 1). canvas.style.zIndex = '0'; - screenElement.style.zIndex = '0'; screenElement.appendChild(canvas); } const ctx = canvas.getContext('2d', { alpha: true, desynchronized: true });