diff --git a/CHANGELOG.md b/CHANGELOG.md index bfba6aa457b..0e055bd753f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md). ### Fixed - Fixed the setting which enables to hide the planes within the 3D viewport. [#3857](https://github.com/scalableminds/webknossos/pull/3857) - Fixed a bug which allowed the brush size to become negative when using shortcuts. [#3861](https://github.com/scalableminds/webknossos/pull/3861) +- 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 - @@ -78,7 +79,6 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md). - Added the possibility to use flight and oblique mode when viewing a dataset. [#3644](https://github.com/scalableminds/webknossos/pull/3644) - Added pagination to the REST API route `GET /projects/:name/tasks` (new optional parameters `limit` and `pageNumber`). [#3659](https://github.com/scalableminds/webknossos/pull/3659) - Added the possibility to open the version restore view for read-only tracings. Older versions can be previewed and be downloaded as NML. [#3660](https://github.com/scalableminds/webknossos/pull/3660) ->>>>>>> f4e956e20af7f5db60a11edb8a7cb0a0dac46a43 ### Changed diff --git a/frontend/javascripts/libs/input.js b/frontend/javascripts/libs/input.js index 3cac88bb4ea..30a86b8c59f 100644 --- a/frontend/javascripts/libs/input.js +++ b/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, { diff --git a/frontend/javascripts/libs/utils.js b/frontend/javascripts/libs/utils.js index 7534da4b6b1..0b5b518e3fd 100644 --- a/frontend/javascripts/libs/utils.js +++ b/frontend/javascripts/libs/utils.js @@ -421,12 +421,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 @@ -438,7 +462,11 @@ export function addEventListenerWithDelegation( } } }; - element.addEventListener(eventName, wrapperFunc, false); + element.addEventListener( + eventName, + wrapperFunc, + areEventListenerOptionsSupported() ? options : false, + ); return { [eventName]: wrapperFunc }; }