esnet / esnet/react-timeseries-charts

Inconsistent zoom scrolling behavior in Firefox vs Chrome

Open
#302 5 comments 4 reactions 0 assignees View on GitHub
:spider: bug
Dominant language
JavaScript
Stars
876
Forks
279
PR merge metrics
No merged PRs in 30d

Description

When using the "scroll to zoom" feature in these examples in the Firefox browser (or any other React Timeseries Charts examples for that matter), the zooming is very slow to the point of affecting usability.

https://software.es.net/react-timeseries-charts/#/example/currency

I'm seeing this issue even in Firefox 61.0.1. I don't see this issue in Chrome 68.0.3440.84.

My suspicion is in the following function:

https://github.com/esnet/react-timeseries-charts/blob/master/src/components/EventHandler.js#L65

`e.deltaY` returns a very different value for Firefox and Chrome. I haven't had the chance to take a look at this further, though.

There are many articles out there talking about "normalizing mousewheel" events, but I'm not sure which approach would be better.

https://stackoverflow.com/questions/5527601/normalizing-mousewheel-speed-across-browsers

Also many issues reported in Firefox Bugzilla regarding scrolling behavior:
[Slow scrolling due to very small deltaY on wheel events (we use deltaMode = 1 (lines), IE/Chrome use 0 (pixels))](https://bugzilla.mozilla.org/show_bug.cgi?id=1057252 )
[The value of deltaX and deltaY of WheelEvent should be in CSS pixels if its deltaMode is DOM_DELTA_PIXEL](https://bugzilla.mozilla.org/show_bug.cgi?id=970141)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.