Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

-webkit-app-region: drag stops working when BrowserView is changed #20926

Closed
3 tasks done
quanglam2807 opened this issue Nov 2, 2019 · 8 comments
Closed
3 tasks done

Comments

@quanglam2807
Copy link
Contributor

quanglam2807 commented Nov 2, 2019

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:
    • 7.0.0/7.0.1
  • Operating System:
    • macOS 10.14.6 / macOS 10.15.1
  • Last Known Working Electron version:
    • 6.0.12

Expected Behavior

User should be able to drag HTML component with -webkit-app-region: drag to move window around.

Actual Behavior

When the React app is first loaded, it works. When BrowserView is changed, HTML parts with -webkit-app-region: drag are no longer draggable. Clicking the components won't fix the problem but try to perform dragging operation on these components would then fix it.

To Reproduce

$ git clone https://github.com/quanglam2807/webcatalog -b v17.1.2
$ cd webcatalog/template
$ yarn
$ yarn electron-dev

Electron will run. The sidebar includes -webkit-app-region: drag and can be dragged. Add multiple workspaces, then try to switch workspace. The BrowserView will be changed. Then, you would no longer be able to drag the side.

Hole a workspace icon on the sidebar and try to drag it, the app would let you rearrange workspaces. Then sidebar is now draggable again.

v16.1.2 is the last version of the app using electron@6.0.12 and it still works ok. The commit following it: webcatalog/webcatalog-legacy@ecf3513 causes the issue.

Reported by user: webcatalog/webcatalog-legacy#354.

Screenshots

Screen Shot 2019-11-01 at 10 27 09 PM

Additional Information

None

@quanglam2807 quanglam2807 changed the title -webkit-app-region: drag stops working when virtual DOM changes -webkit-app-region: drag stops working when BrowserView is updated Nov 3, 2019
@quanglam2807
Copy link
Contributor Author

Update: Reloading webContents of BrowserWindow after setBrowserView would make dragging works again.

@quanglam2807 quanglam2807 changed the title -webkit-app-region: drag stops working when BrowserView is updated -webkit-app-region: drag stops working when BrowserView is changed Nov 3, 2019
@sofianguy sofianguy added this to Unsorted Issues in 7.2.x Nov 6, 2019
@sentialx
Copy link
Contributor

I can confirm that on macOS after changing the BrowserView using either setBrowserView or addBrowserView breaks dragging in a frameless window. After reloading the BrowserWindow, it starts working. I'm using Electron 8.0.0-beta.2.

@ivanalejandro0
Copy link

I've had a similar problem after upgrading from electron 4 to 7.

To me, the problem appears when I vertically resize the window, and gets "fixed" if I resize the window horizontally or minimize/restore it.

I found a workaround for this problem here: nwjs/nw.js#2375 (comment)

I just added an extra node to my app:

<body>
  <!-- app content here -->
  <div style="-webkit-app-region: no-drag;"></div>
</body>

I still haven't investigated why this fixes the problem, but with this I no longer see the issue.

I hope this helps.

@xuchaoqian
Copy link

Have the same issue here.

@sentialx
Copy link
Contributor

sentialx commented Dec 3, 2019

@ivanalejandro0 Despite it fixes the issue with vertical resizing, it still doesn't fix the issue with changing BrowserViews.

@sentialx
Copy link
Contributor

sentialx commented Dec 3, 2019

I found a workaround for this issue. You can try increasing window's width (or height, if you've applied @ivanalejandro0's fix) by 1 and then restoring it to the original size. Example code:

const { width } = win.getBounds();
win.setBounds({ width: width + 1 });
win.setBounds({ width });

@quanglam2807
Copy link
Contributor Author

Fixed with #21723

@pejman1
Copy link

pejman1 commented Nov 2, 2020

same issue in electron 10.1.5 in windows 10, browser view is not draggable after removing and adding

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
7.2.x
Unsorted Issues
Development

No branches or pull requests

6 participants