z-index issue with WebViews and overlayed elements in newer NW.js versions

NWJS Version: 0.33.2 and 0.33.4 Operating System: Ubuntu 18.04 LTS

Expected behavior

Clicking anything in the modal should capture the mouse events (close modal, press action buttons, select text).

See image below:

Actual behavior

Clicking anything in the modal acts on the PDF (like it is on top) regardless rendering. Seems z-index works for displaying the stacked elements correctly but not for input (mouse events).

How to reproduce

HTML markup:

<div class="container">
  <webview src="://url/to/pdf"></webview>
  <div class="backdrop">
    <div class="modal">
      <p>This is some text within a modal body.</p>
      <button>Dismiss</button>
    </div>
  </div>
</div>

WebView and overlay styles:

.container {
  position: relative;
}

.container webview {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}

.container .backdrop {
  background-color: rgba(0, 0, 0, .3);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 20;
}

.container .modal {
  position: absolute;
  z-index: 30;
  /* ...other modal styles... */
}

It was working properly with NW.js 0.30.2 and 0.31.0 versions. This behaviour was introduced after upgrading to newer NW.js versions. Is there anything related to plugins in frames/webviews that was changed in recent releases (like the Chromium PDF Viewer plugin)? Thanks!

[cdog]

Hello @rogerwang,

Thanks for pointing out. Tested with Chromium alone and it does reproduce the issue indeed.

Tested with the following Chromium versions:

• 69.0.3497.92 (https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Mac/576753/)
• 70.0.3538.67 (https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Mac/587811/)
• 72.0.3591.0 (https://download-chromium.appspot.com/)

Doesn’t work with Chromium 69 and 70. It works with version 72.

Uploaded a test case repository (basic Chrome App) for testing the scenario: https://github.com/cdog/chromium-webview-pdf-overlay

Expected result: Be able to click on “Test link” inside the overlay. Actual result: “Test link” is not clickable (with mentioned Chromium version 69 and 70).

Guess this will be fixed with newer releases of NW.js (by using newer Chromium builds).

[rohan-deshpande]

@rogerwang sorry to comment on this issue again but I actually discovered the problem, attempting to have a frameless NWJS window broke things for me. So

  "window": {
    "frame": false
  },

is broken and

  "window": {
    "frame": true
  },

is fine. This only happened after upgrading from v0.31.0. Were there any changes that would have made this happen?