From 81ea359cb284fe478c4b4c3a0daa2a2806b00416 Mon Sep 17 00:00:00 2001 From: Jae Sung Park Date: Fri, 26 Jul 2024 18:25:43 +0900 Subject: [PATCH] fix(zoom): Fix zoom wheel interaction As of Safari needs bind wheel event to svg element, prior within element, apply workaround to Safari desktop only Fix #3856 --- src/ChartInternal/interactions/zoom.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/ChartInternal/interactions/zoom.ts b/src/ChartInternal/interactions/zoom.ts index 3e5f5c006..9e072c722 100644 --- a/src/ChartInternal/interactions/zoom.ts +++ b/src/ChartInternal/interactions/zoom.ts @@ -9,6 +9,7 @@ import { zoomTransform as d3ZoomTransform } from "d3-zoom"; import {$COMMON, $ZOOM} from "../../config/classes"; +import {window} from "../../module/browser"; import {callFn, diffDomain, getPointer, isFunction} from "../../module/util"; export default { @@ -329,9 +330,17 @@ export default { */ bindZoomOnEventRect(): void { const $$ = this; - const {config, $el: {eventRect}} = $$; + const {config, $el: {eventRect, svg}} = $$; const behaviour = config.zoom_type === "drag" ? $$.zoomBehaviour : $$.zoom; + // On Safari, event can't be built inside the svg content + // for workaround, register wheel event on element first + // https://bugs.webkit.org/show_bug.cgi?id=226683#c3 + // https://stackoverflow.com/questions/67836886/wheel-event-is-not-fired-on-a-svg-group-element-in-safari + if (window.GestureEvent && /^((?!chrome|android|mobile).)*safari/i.test(navigator.userAgent)) { + svg.on("wheel", () => {}); + } + eventRect?.call(behaviour) .on("dblclick.zoom", null); },