diff --git a/package.json b/package.json index 34917da..353b2ff 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "dexie": "^2.0.4", "interactjs": "^1.9.7", "js-binarypack": "^0.0.9", + "normalize-wheel": "^1.0.1", "react": "^16.13.0", "react-dom": "^16.13.0", "react-modal": "^3.11.2", diff --git a/src/components/map/MapInteraction.js b/src/components/map/MapInteraction.js index 9a041b0..5d21afe 100644 --- a/src/components/map/MapInteraction.js +++ b/src/components/map/MapInteraction.js @@ -1,6 +1,7 @@ import React, { useRef, useEffect } from "react"; import { Box } from "theme-ui"; import interact from "interactjs"; +import normalizeWheel from "normalize-wheel"; import { MapInteractionProvider } from "../../contexts/MapInteractionContext"; @@ -84,10 +85,13 @@ function MapInteraction({ map, aspectRatio, isEnabled, children, controls }) { // also stop pinch to zoom on chrome event.preventDefault(); + // Try and normalize the wheel event to prevent OS differences for zoom speed + const normalized = normalizeWheel(event); + const scale = mapScaleRef.current; const translate = mapTranslateRef.current; - const deltaY = event.deltaY * zoomSpeed; + const deltaY = normalized.pixelY * zoomSpeed; const newScale = Math.max(Math.min(scale + deltaY, maxZoom), minZoom); setTranslateAndScale(translate, newScale); diff --git a/yarn.lock b/yarn.lock index 437efce..3dce1d6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7459,6 +7459,11 @@ normalize-url@^3.0.0: resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559" integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg== +normalize-wheel@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45" + integrity sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU= + npm-run-path@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"