electron: With Developer Tools open, `-webkit-app-region:drag` does not work

This is a regression—in Electron 0.35.1, draggable regions of the window stop working when the developer tools are opened. This means that the window effectively can’t be moved while the developer tools are open. It doesn’t matter if the developer tools are docked or in a separate window.

I think this might be a side effect of an intentional change? In previous versions, you couldn’t use the “Inspect Element” feature to click and select part of the DOM that was in a draggable region (since it was still draggable.) That now works (I can hover over and click on my title bar), but I can’t move the window.

Here’s a sample app to reproduce. Open the app, enable “top toolbar” and then open the developer tools:

https://dl.dropboxusercontent.com/u/4803975/frameless-window.zip

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 31
Comments: 36 (14 by maintainers)

Commits related to this issue

fix(AppDrag): added back `Header` component, renamed to `AppDrag` Needed so that the app can be moved in electron mode. There is an electron bug, however, that does not allow you to move the app when... — committed to qri-io/2017-frontend by ramfox 6 years ago
Fixed header drag & drop through external library. See: https://github.com/electron/electron/issues/3647 — committed to dat-ecosystem-archive/dat-desktop by martinheidegger 6 years ago
Fixed header drag & drop through external library. See: https://github.com/electron/electron/issues/3647 — committed to dat-ecosystem-archive/dat-desktop by martinheidegger 6 years ago
chore: added conditional value for windows to avoid losing dragging capabilities this address the electron v14 onward drag issue: https://github.com/electron/electron/issues/3647 — committed to Noovolari/leapp by urz9999 3 years ago

Most upvoted comments

A workaround for those that are affected by this long standing bug - if you hover the mouse over the top edge of the window until you see a resize cursor and then hold and drag to the side instead of up and down to resize it will let you move the window.

+32

tommoor on Apr 4, 2017

Issue confirmed on macOS Sierra with Electron 1.6.4.

This issue should be at least documented if not fully resolvable in the near term due to low priority.

+16

donpark on Mar 24, 2017

Not sure if this was fixed but it works for me now (electron 1.4.2) with dev-tools open on Windows. Note, it is important to set the width and height, otherwise it would not work. Also, this only works when dragging from within the regular top area.

...
win = new BrowserWindow({
  frame: false
});
...

...
<head>
  <style media="screen">
    html, body {
      -webkit-app-region: drag;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
...

+10

mariotacke on Oct 12, 2016

Mac electron 7.1.7 -webkit-app-region: drag

move window not work after called setSize

wells1013 on Dec 24, 2019

Any updates on this issue? Still having it in

macOS 10.12.6
Electron 3.0.4

justintaylor-dev on Nov 15, 2018

Still affects Electron 4.1.4.

This isn’t actually an issue with the dragging not working completely, it’s just that the hitboxes are placed incorrectly when the developer tools are open, i.e. they overlap some part of the developer tools sidebar and some parts of the non-draggable elements, while not being active over some elements that are supposed to be draggable.

nukeop on Apr 20, 2019

Also, just upgraded and still having the issue in

MacOS 10.13.6
Electron 3.0.9

justintaylor-dev on Nov 19, 2018

still an issue on os x 10.11.6 with Electron 1.6.2 using either frame: false or titleBarStyle: 'hidden'

jonniedarko on Mar 23, 2017

I have the same problem with drag

System: Windows 10 Node v14.17.6 Electron 14.0.1

Try downgrading to electron v 13.0.0

I got 13.3.0 version and drag is working ❤❤❤

EnterVPL on Sep 19, 2021

Had this issue on electron v 14.0.1 and 15.0.0 beta releases but downgrading to v ^13.0.0 solved my issue

muneebbug on Sep 19, 2021

I have the same issue. Current window can be dragged to everywhere freely, but it doesn’t work when i try to resize current window(remote.getCurrentWindow().setSize())

caprice on Dec 25, 2019

This seems to be more of an issue now that the titleBarStyle behaviour was changed to not have the top area draggable by default

tommoor on Jun 7, 2016

Why the option -webkit-app does not show to me when writing?

Wehaveall on Jun 27, 2023

I have the same problem with drag

System: Windows 10 Node v14.17.6 Electron 14.0.1

Try downgrading to electron v 13.0.0

muneebbug on Sep 19, 2021

I have the same problem with drag

System: Windows 10 Node v14.17.6 Electron 14.0.1

EnterVPL on Sep 19, 2021