Always make wheel listeners not passive to allow preventDefault

CHANGELOG.md

@@ -34,6 +34,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - Fixed interpolation along z-axis. [#3888](https://github.com/scalableminds/webknossos/pull/3888)
 - Fixed that the halo of the active node could cover other nodes. [#3919](https://github.com/scalableminds/webknossos/pull/3919)
 - Fixed that the 3D viewport was partially occluded due to clipping distance issues. [#3919](https://github.com/scalableminds/webknossos/pull/3919)
+- Fixed that scrolling with the mouse wheel over a data viewport also scrolled the page. This bug appeared with the new Chrome version 73. [#3939](https://github.com/scalableminds/webknossos/pull/3939)
 
 ### Removed
 - Removed FPS meter in Annotation View. [#3916](https://github.com/scalableminds/webknossos/pull/3916)

frontend/javascripts/libs/input.js

@@ -385,7 +385,13 @@ export class InputMouse {
     );
     _.extend(
       this.delegatedEvents,
-      Utils.addEventListenerWithDelegation(document, "wheel", this.targetSelector, this.mouseWheel),
+      Utils.addEventListenerWithDelegation(
+        document,
+        "wheel",
+        this.targetSelector,
+        this.mouseWheel,
+        { passive: false },
+      ),
     );
 
     this.hammerManager = new Hammer(this.domElement, {

frontend/javascripts/libs/utils.js

@@ -442,12 +442,36 @@ export function isNoElementFocussed(): boolean {
   return document.activeElement === document.body;
 }
 
+// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
+const areEventListenerOptionsSupported = _.once(() => {
+  let passiveSupported = false;
+
+  try {
+    const options = {
+      // $FlowIgnore
+      get passive() {
+        // This function will be called when the browser
+        //   attempts to access the passive property.
+        passiveSupported = true;
+        return true;
+      },
+    };
+
+    window.addEventListener("test", options, options);
+    window.removeEventListener("test", options, options);
+  } catch (err) {
+    passiveSupported = false;
+  }
+  return passiveSupported;
+});
+
 // https://stackoverflow.com/questions/25248286/native-js-equivalent-to-jquery-delegation#
 export function addEventListenerWithDelegation(
   element: HTMLElement,
   eventName: string,
   delegateSelector: string,
   handlerFunc: Function,
+  options: Object = {},
 ) {
   const wrapperFunc = function(event: Event) {
     // $FlowFixMe Flow doesn't know native InputEvents
@@ -459,7 +483,11 @@ export function addEventListenerWithDelegation(
       }
     }
   };
-  element.addEventListener(eventName, wrapperFunc, false);
+  element.addEventListener(
+    eventName,
+    wrapperFunc,
+    areEventListenerOptionsSupported() ? options : false,
+  );
   return { [eventName]: wrapperFunc };
 }
 

frontend/javascripts/navbar.js

@@ -144,7 +144,6 @@ function StatisticsSubMenu({ collapse, ...menuProps }) {
 function HelpSubMenu({ isAdmin, version, collapse, ...other }) {
   return (
     <SubMenu
-      key="helpMenu"
       title={
         <CollapsibleMenuTitle
           title="Help"
@@ -312,7 +311,12 @@ function Navbar({ activeUser, isAuthenticated, history, isInAnnotationView, hasO
   }
 
   menuItems.push(
-    <HelpSubMenu version={version} isAdmin={isAdmin} collapse={collapseAllNavItems} />,
+    <HelpSubMenu
+      key="helpMenu"
+      version={version}
+      isAdmin={isAdmin}
+      collapse={collapseAllNavItems}
+    />,
   );
 
   // Don't highlight active menu items, when showing the narrow version of the navbar,