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.

Sign up for GitHub

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

Jump to bottom

webview mouse enter / leave not working correctly in 0.29.x #6518

Closed
frankhale opened this issue Mar 14, 2018 · 15 comments
Closed

webview mouse enter / leave not working correctly in 0.29.x #6518

frankhale opened this issue Mar 14, 2018 · 15 comments
Assignees
@rogerwang
Labels
bug P2 triaged

Comments

@frankhale
Copy link
Contributor

NWJS Version : 0.29.0 and 0.29.1
Operating System : Windows 10

Expected behavior

Mouse enter and leave events should be fired when mouse enters and leaves the webview. This behavior worked fine prior to 0.29.x branch. I've tested with the 0.26 branch and the 0.28 branch and it works as expected there.

Actual behavior

Sometimes mouse enter and leave fire but its sporadic and most of the time it works just once.

How to reproduce

The way I'm reproducing it is by having a small app that has some content to scroll inside a webview. The scrollbar is hidden when mouse exits and shown when mouse enters. I'm using CSS to do this rather than the actual mouse enter and leave events although I've tried that with the same effect.

Here are the files you can use to reproduce the behavior:

package.json

{
  "name": "scroll-test",
  "main": "index.html"
}

index.html

<!DOCTYPE html>
<html>

<head>
  <title>webview scroll test</title>

  <style>
    html,
    body {
      overflow: hidden;
    }

    #webview {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1000;
      display: inline-flex !important;
    }
  </style>
</head>

<body>
  <webview id="webview" src="http://127.0.0.1:8080" />
</body>

</html>

Here is the index.html for the content to load into the webview for the mouse enter and leave event test. I'm using live-server to serve this up to my webview.

<!DOCTYPE html>
<html>

<head>
  <title>Hello World!</title>

  <style>
    html,
    body {
      overflow: hidden;
    }

    #main {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      overflow: hidden;
    }

    #main:hover {
      overflow-y: scroll;
    }
  </style>
</head>

<body>
  <div id="main">
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
  </div>
</body>

</html>
@frankhale
Copy link
Contributor Author

I should also note that if I switch from a webview to an iframe everything works fine in the 0.29.x branch. So something is going on specifically with the webview.

@frankhale
Copy link
Contributor Author

This seems to be a focus issue.

@frankhale
Copy link
Contributor Author

If you manually click inside the window then leave and enter things work one time. Repeating that process it will work exactly one time. Attach mouseenter and mouseout events and log the output you'll see that mouseout is not called when mouse exits the window. But when you enter window again you'll see that mouseout is fired and then immediately mouseenter is fired. This is very strange behavior. Seems to be related to focus but I cannot simulate taking focus using JavaScript to work around it. You have to physically click inside the window to make events fire correctly.

@frankhale
Copy link
Contributor Author

I can make a screencast showing this behavior if need be

@Christywl
Copy link
Contributor

I can reproduce this issue on Linux/Windows with nwjs-sdk-v0.29.0.

@rogerwang
Copy link
Member

@Christywl does it work in a Chrome App in Chrome browser?

@Christywl
Copy link
Contributor

It works fine in a Chrome App with Chrome M65.

@frankhale
Copy link
Contributor Author

I know it wasn't specifically addressed yet but just wanted to note that the issue still exists in 0.29.2

@rogerwang rogerwang added the WIP label Mar 24, 2018
@rogerwang
Copy link
Member

Yeah. Will definitely look to fix this. 0.29.2 was released to catch up an upstream security update.

@frankhale
Copy link
Contributor Author

Unfortunately in 0.30.0-beta1 the issue is actually worse. Hiding/Showing scrollbar using CSS hover on a webview works exactly once while the app is started. Whereas in 0.29 you could focus away and focus back and it'd work again.

@rogerwang
Copy link
Member

Does everything work for you if passed --enable-features=GuestViewCrossProcessFrames ?

@rogerwang
Copy link
Member

This is fixed in git and will be available in the next nightly build. cc #6171

@frankhale
Copy link
Contributor Author

@rogerwang yes passing "--enable-features=GuestViewCrossProcessFrames" to nw.exe works for me

@frankhale
Copy link
Contributor Author

I tried it with NW 0.30.0-beta1

@frankhale
Copy link
Contributor Author

Also tested in NW 0.29.2 and it works great. Thanks @rogerwang !!!!

@rogerwang rogerwang removed the WIP label Apr 4, 2018
@alexgor1 alexgor1 mentioned this issue Apr 11, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@rogerwang rogerwang

Labels
bug P2 triaged
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@rogerwang @frankhale @Christywl