Merge pull request xtermjs#5718 from xtermjs/anthonykim1/fixZindex

Fix image addon overriding screen element z-index

Author: anthonykim1

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 });