Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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>