Electron Linux/X11 opaque frameless resize jitter reproduction

README.md

Electron Linux/X11 opaque frameless resize jitter

This reproduction compares native interactive resizing on the same Electron 43.4.1 build using its default ANGLE/OpenGL backend and ANGLE/Vulkan.

Reproduction

npm install

# Reproduction: visible jitter
npm start

# Matched Vulkan control: smooth
npm run start:vulkan

Quickly resize each window vertically from the bottom edge and diagonally from either bottom corner. There is no JavaScript resizing, IPC bounds update, setBounds(), or custom resize implementation.

Confirmed environment

• Ubuntu 22.04.5 LTS
• GNOME Shell 42.9, X11
• Linux 6.16.7
• Intel Meteor Lake-P / Intel Arc Graphics using the i915 driver
• Mesa 23.2.1

Matched comparison

Electron build	Graphics configuration	Result
43.4.1	Default ANGLE/OpenGL (--use-angle not set)	Visible resize jitter
43.4.1	--use-angle=vulkan with Vulkan,DefaultANGLEVulkan,VulkanFromANGLE	Smooth

Electron 43.4.1 includes #52947, which restored native resizing for transparent frameless Linux windows. That separate regression had confounded earlier cross-version testing. The previously reported Alpha 3/Alpha 4 boundary and source-commit attribution are withdrawn; the reliable differentiator in the current matched test is the graphics backend.

main.cjs

const { app, BrowserWindow } = require('electron');

app.whenReady().then(() => {
  const window = new BrowserWindow({
    width: 980,
    height: 660,
    minWidth: 640,
    minHeight: 420,
    frame: false,
    resizable: true,
    transparent: false,
    backgroundColor: '#1e1f22',
  });

  window.loadURL(`data:text/html;charset=utf-8,${encodeURIComponent(`
    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8" />
        <style>
          * { box-sizing: border-box; }
          html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
          body { color: #f4f4f5; background: #1e1f22; font: 14px system-ui, sans-serif; }
          .titlebar {
            height: 40px; display: flex; align-items: center; padding: 0 14px;
            background: #2a2b2f; font-weight: 700; -webkit-app-region: drag;
          }
          .content { padding: 24px; }
          .badge {
            display: inline-block; padding: 5px 9px; border-radius: 6px;
            background: #3574f0;
          }
          .grid {
            margin-top: 20px; display: grid;
            grid-template-columns: repeat(3, 1fr); gap: 12px;
          }
          .card {
            min-height: 105px; padding: 14px;
            border: 1px solid #48494d; background: #151619;
          }
        </style>
      </head>
      <body>
        <div class="titlebar">Electron ${process.versions.electron} — opaque frameless X11</div>
        <div class="content">
          <span class="badge">No custom resize code</span>
          <p>Quickly resize from the native bottom edge and bottom corners.</p>
          <div class="grid">
            <div class="card">A</div><div class="card">B</div><div class="card">C</div>
          </div>
        </div>
      </body>
    </html>
  `)}`);
});

app.on('window-all-closed', () => app.quit());

package.json

{
  "name": "electron-linux-resize-jitter-repro",
  "private": true,
  "version": "1.0.0",
  "main": "main.cjs",
  "scripts": {
    "start": "electron --ozone-platform=x11 .",
    "start:vulkan": "electron --ozone-platform=x11 --use-angle=vulkan --enable-features=Vulkan,DefaultANGLEVulkan,VulkanFromANGLE ."
  },
  "devDependencies": {
    "electron": "43.4.1"
  }
}