electron: -webkit-app-region: drag; not working when set to an element in BrowserView

Preflight Checklist

  • I have read the Contributing Guidelines for this project.
  • I agree to follow the Code of Conduct that this project adheres to.
  • I have searched the issue tracker for an issue that matches the one I want to file, without success.

Issue Details

  • Electron Version:
    • 5.0.11 & 7.0.1
  • Operating System:
    • Windows 10 (1903)
  • Last Known Working Electron version:
    • N/A

Expected Behavior

Setting -webkit-app-region: drag; should enable dragging of the window

Actual Behavior

Setting -webkit-app-region: drag; doesn’t allow dragging of window

To Reproduce

main.js

const { app, BrowserWindow , BrowserView } = require('electron');
const { Path } = require('path');
function createWindow () {
// Create the browser window.
let win = new BrowserWindow({
width: 800,
height: 600,
frame : false
})

// and load the index.html of the app.
win.loadURL('https://www.github.com/');

let view = new BrowserView();
win.setBrowserView( view );
view.webContents.loadURL( Path.join( __dirname , 'draggable.html')  );
view.setBounds({
x:0,
y:0,
width:800,
height:30
});

view.setAutoResize({
width : true,
horizontal:true
});
}

app.on('ready', createWindow);

draggable.html

<html>
	<head>
		<style type="text/css">
			body{ background: blue; overflow: hidden; -webkit-app-region: drag; width: 100%; height: 100%; }
		</style>
	</head>
<body>
</body>
</html>

Screenshots

Additional Information

Worked as expected in MacOS

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 5
  • Comments: 15 (4 by maintainers)

Most upvoted comments

Google brought me here, but the issue that ended up being relevant to me was #27173. Removing <!DOCTYPE html> did the trick. So far, I haven’t seen any negative repercussions of removing that doctype.

I found a workaround for this issue. You can put the draggable divs at the same region in BrowserWindow, then even if you put a BrowserView on top of that region, that region is still draggable.

Tried removing <!DOCTYPE html>, didn’t see a difference. electron: 10.2.0

I found a workaround for this issue. You can put the draggable divs at the same region in BrowserWindow, then even if you put a BrowserView on top of that region, that region is still draggable.

@quanglam2807 do you mean that you’re putting the drag region in the BrowserWindow’s webContents?

Yes, that’s what I did.