@xterm/addon-image 0.10.0-beta.164 → 0.10.0-beta.165

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xterm/addon-image",
-  "version": "0.10.0-beta.164",
+  "version": "0.10.0-beta.165",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"
@@ -27,8 +27,8 @@
     "sixel": "^0.16.0",
     "xterm-wasm-parts": "^0.3.0"
   },
-  "commit": "0b6220e5ea00f429e5fb991922d4ae2c0a2aea10",
+  "commit": "d99e6bb2bc6d2c3003673b822b8d8072eb51dd44",
   "peerDependencies": {
-    "@xterm/xterm": "^6.1.0-beta.164"
+    "@xterm/xterm": "^6.1.0-beta.165"
   }
 }

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