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

BrowserView attached with non zero x or y bounds has an invisible draggable area #27204

Closed
3 tasks done
kevinlinv opened this issue Jan 6, 2021 · 7 comments
Closed
3 tasks done

Comments

@kevinlinv
Copy link
Contributor

kevinlinv commented Jan 6, 2021

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: 10.1.6 and beyond
  • Operating System macOS 10.15.7
  • Last Known Working Electron version: 10.1.5

Expected Behavior

The end part of the BrowserView should not be draggable

Actual Behavior

The end part of the BrowserView is draggable

To Reproduce

Load electron fiddle friendly gist here https://gist.github.com/kevinlinv/9b2b1d078920b7dbf4efce015fda9f6e

Collapse here for the code in case gist is not loading

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="./styles.css">
    <style>
      * { margin: 0px; padding: 0px; }
    </style>
  </head>
  <body>
    <h2>This is the content of the window - try to drag the bottom part of the window</h2>
    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>

main.js

const {app, BrowserView, BrowserWindow} = require('electron')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  mainWindow.loadFile('index.html')

  const browserView = new BrowserView();
  browserView.setBackgroundColor('#000000');
  browserView.setAutoResize({
    width: true,
    height: true,
    horizontal: false,
    vertical: false,
  });

  const { width, height } = mainWindow.getContentBounds();
  const windowContentHeight = 40;
  mainWindow.setBrowserView(browserView);
  browserView.setBounds({
    x: 0,
    // Setting the y point on the bounds causes the same amount of px
    // being draggable at the bottom of the view
    y: windowContentHeight, 
    width,
    height: height - windowContentHeight,
  });
}

app.whenReady().then(createWindow)

app.on('window-all-closed', app.quit)

package.json

{
  "name": "browser view draggable",
  "productName": "browser view draggable",
  "description": "My Electron application description",
  "keywords": [],
  "main": "./main.js",
  "version": "1.0.0",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {},
  "devDependencies": {
    "electron": "10.1.6"
  }
}

Note that in this example, I am modifying the y bound and as result the same amount of px is draggable towards the end of the view, the same happens if we modify x but on a different axis.

view.draggable.report.mp4

Additional Information

I believe this is related to #26145
Which originally causes issues: #27147, #26690

@kevinlinv
Copy link
Contributor Author

cc @codebytere as I see you're the assignee for the other similar issues 🙂

@codebytere
Copy link
Member

codebytere commented Jan 6, 2021

hey @kevinlinv - i already fixed this actually :D #27147 should take care of it, out in a new release soon (if i run it on master after this fix, i no longer can drag the bottom bit)

@kevinlinv
Copy link
Contributor Author

Ah, cool 🙈 thanks for the quick response, lets close this issue then 👌

@codebytere
Copy link
Member

If you don't see it fixed in the next release though please ping me and i can investigate and reopen!

@kevinlinv
Copy link
Contributor Author

👌 Wil do

@ruihanzhao
Copy link

ruihanzhao commented Feb 23, 2021

I am still seeing this issue on 10.4.0. It's a very similar situation where the part shifted in the BrowserView has an invisible draggable region on the other side. I do notice that this only happens though if inside the browserview's webcontents itself there is any kind of draggable region (does not matter if set to drag or no-drag), similar to the last comment on #27112. This is preventing us from upgrading our app to electron 10 or 11, previously we were on 8 and it was working fine. Also, in upgrading to 10, if there is an overlapping browserView in a browserWindow with a drag region set (drag region is set in browserWindow), it does not appear that the overlapping part of the browserview is able to be dragged anymore without specifying an additional drag region inside the browserView. Any updates on if this issue is still being looked into?

@codebytere
Copy link
Member

@ruihanzhao can you please open a new issue and tag me?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants