I am making an app in Electron and I have a frameless window, I have some top areas to -webkit-app-region: drag but when I do this, the will not change.

obviously it will not be draggable in this snippet because it's not an electron app, but basically the cursor will not change on an element that is draggable.

EDIT: it seems that trying to change the cursor on any webkit style does not work at all as I tried to change the cursor on a scrollbar as well. Is there any fix to this? I have googled it but found nothing that fits.

#draggable {
  -webkit-app-region: drag;
  cursor: grab;
  height: 40px;
  width: 90%;
  margin: 0;
  background-color: #393939;
  color: #000;
  position: absolute;
  z-index: 2;
  top: 0;
  border-bottom: 3px solid #202020;
}
#draggable:hover {
  cursor: grab;
}

<div id="draggable">
   <h3 style="margin: 5px 0 0 10px;">Hardware Application</h3>
</div>

I am making an app in Electron and I have a frameless window, I have some top areas to -webkit-app-region: drag but when I do this, the will not change.

obviously it will not be draggable in this snippet because it's not an electron app, but basically the cursor will not change on an element that is draggable.

EDIT: it seems that trying to change the cursor on any webkit style does not work at all as I tried to change the cursor on a scrollbar as well. Is there any fix to this? I have googled it but found nothing that fits.

#draggable {
  -webkit-app-region: drag;
  cursor: grab;
  height: 40px;
  width: 90%;
  margin: 0;
  background-color: #393939;
  color: #000;
  position: absolute;
  z-index: 2;
  top: 0;
  border-bottom: 3px solid #202020;
}
#draggable:hover {
  cursor: grab;
}

<div id="draggable">
   <h3 style="margin: 5px 0 0 10px;">Hardware Application</h3>
</div>

• javascript
• css
• electron
• electron-builder

• Related chromium issue bugs.chromium/p/chromium/issues/… – Red Mercury Commented Nov 19, 2017 at 18:18

2 Answers 2

Unfortunately setting -webkit-app-region: drag; disables all click and mouse events because it's treated as a title-bar so you can't change the cursor.

I would include where I read that but I can't find it anymore.

See:

#1354 -webkit-app-region: drag eats all click events

#8730 Frameless Electron App not work css cursor:pointer

yeah, sorry, but there is an alternative that works with a few limitations:

example of a titlebar in react-ts which sends the mouse movement once dragging starts:

function Header({ leading, navigation, following }: HeaderProps) {
  const navigate = useNavigate();
  const [, startTransition] = useTransition();
  const [dragging, setDragging] = useState(false);
  return (
    <div
      className="titleBar"
      onMouseDown={() => {
        setDragging(true);
      }}
      onMouseUp={() => {
        setDragging(false);
      }}
      onMouseLeave={() => {
        setDragging(false);
      }}
      onMouseMove={(e) => {
        if (dragging) {
          window.electron.ipcRenderer.sendMessage(
            'window',
            'move',
            e.movementX,
            e.movementY
          );
        }
      }}
    >
      <div className="flexrow_start">
        {leading}
        <div>
          {navigation.map((info, index) => (
            <button
              type="button"
              onClick={(e) => {
                e.preventDefault();
                startTransition(() => {
                  navigate(info.destination ?? '/');
                });
              }}
              key={index}
            >
              {info.content}
            </button>
          ))}
        </div>
      </div>
      {following !== undefined && (
        <div className="flexrow_end"> {following}</div>
      )}
    </div>
  );
}

in main.ts:

ipcMain.on('window', (e, arg, arg2, arg3) => {
  switch (arg as string) {
    // es from element added to header as element following routes
    case 'min':
      mainWindow?.minimize();
      break;
    // es from element added to header as element following routes
    case 'max':
      if (mainWindow?.isMaximized()) {
        mainWindow.unmaximize();
      } else {
        mainWindow?.maximize();
      }
      break;
    // es from element added to header as element following routes
    case 'close':
      app.quit();
      break;
    //header element dragging handler
    case 'move':
      console.log(arg2, arg3);
      mainWindow?.setPosition(
        mainWindow.getPosition()[0] + arg2,
        mainWindow.getPosition()[1] + arg3
      );
      break;
    default:
      break;
  }
});

.titleBar{
  height: 50px;
  display: flex;
  justify-content: space-between;


}
.titleBar:hover{
  cursor: grab;

}

EDIT: it doesn't work well when you move the electron app between displays. If anyone has a solution for that, I would be very gratreful for a ment