Skip to content

Commit

Permalink
fix(zoom): Fix zoom wheel interaction
Browse files Browse the repository at this point in the history
As of Safari needs bind wheel event to svg element, prior within element,
apply workaround to Safari desktop only

Ref naver#3856
  • Loading branch information
netil committed Jul 26, 2024
1 parent 567b323 commit 94b6718
Showing 1 changed file with 10 additions and 1 deletion.
11 changes: 10 additions & 1 deletion src/ChartInternal/interactions/zoom.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 <svg> 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);
},
Expand Down

0 comments on commit 94b6718

Please sign in to comment.