'Electron window dragging incompatible with titleBarOverlay

When Electron BrowserWindow is configured with titleBarOverlay, elements with CSS property -webkit-app-region: drag are not dragging the window anymore (this is working well without titleBarOverlay).

The issue seems to be only on Windows (it is working well on MacOS).

Do you have any clue about this issue? Thank you!

app-process.js:

  const window = new BrowserWindow({
    width: 1000,
    height: 700,
    titleBarStyle: 'hidden',
    titleBarOverlay: {
      color: '#1D1D1D',
      symbolColor: '#ffffff'
    },
    frame: false,
    webPreferences: {
      webviewTag: true,
      enableRemoteModule: true,
      nodeIntegration: true,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  });

TopBar:

<nav style="-webkit-app-region: drag; -webkit-app-select:none;">
  ...
</nav>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Electron window dragging incompatible with titleBarOverlay

Sources

Related Questions