Leaflet: Scrollwheel Zoom issue in Chrome

[MuellerMatthew]

I have noticed since updating to the newest leaflet version that all of my scroll wheel zooms are now jumping 2 zoom levels in chrome instead of one every time I use my scroll wheel.

The issue appears to be the result of using a default value of '50' for wheelPxPerZoomLevel to control zoom speed, while using a normalized getWheelDelta function which converts your scroll wheel data to a standardized value. In Chrome my getWheelDelta function is returning 100 for a single scroll on the scroll wheel while firefox only returns 50

[ktoto]

it's happen here https://github.com/Leaflet/Leaflet/blob/master/src/map/handler/Map.ScrollWheelZoom.js#L67

Why here we use Math.ceil while in _limitZoom using Math.round?

[nathancahill]

Anecdotally I'd agree with this, Chrome seems to be much more touchy that Firefox when scroll zooming.

[hyperknot]

That code is super sensitive... The important thing is that we didn't change it between Leaflet releases, at least we made sure with @IvanSanchez that it's producing the same results as it did before. It'd be really important to know what causes this behaviour to change.

@MuellerMatthew @ktoto can you test which exact Leaflet version is behaving differently. Is it beta2 or only rc1? You can try it out on playground here:
http://playground-leaflet.rhcloud.com/

[MuellerMatthew]

@hyperknot

• rc1 is skipping zoom levels in chrome demo
• beta2 does not skip zoom levels demo

[hyperknot]

@MuellerMatthew ok, that's quite a serious bug then, we will fix it as soon as possible.

Can you report what OS are you using and with what kind of device? Also, what values do you get on http://mousewheeldatacollector.herokuapp.com/ ?

[MuellerMatthew]

Chrome 50.0.2661 / Windows 7
Values:
Min (norm, raw):1, 100
Max (norm, raw):1, 100
Resolution:100

I'm using a standard Dell scroll wheel mouse.

[hyperknot]

@MuellerMatthew and what kind of mouse? Just a normal USB mouse with wheel?

[MuellerMatthew]

yes.

[hyperknot]

OK, I'll try to test this out in a VM with a USB mouse, also @IvanSanchez can you have a second look on this?

[ktoto]

@hyperknot I've same results as @MuellerMatthew.
beta2 - ok
rc1 - skipping zoom.

I'm using standard USB mouse too.

[IvanSanchez]

Yeah, seems that the delta of the WheelEvent is 100 in chrome in Win7. :angry:

I also did a quick check with a screen ruler and amazingly, Chrome in Win7 indeed scrolls 100 pixels per wheel click, whereas in Linux it scrolls 50.

Firefox instead uses DeltaMode=1 to scroll lines instead of pixels.

We could do some browser hack, suck as using the deprecated wheelDelta property (which we use for scrolled pixels in legacy IE, which is always +/-120), maybe spying on the chrome-specific sourceCapabilities of the WheelEvent.

I'm partial to sending this as an upstream bug report to the Chrome folks. Thoughts?

[IvanSanchez]

@MuellerMatthew Are you using a virtual machine by any chance?

@ktoto Which OS & version are you using?

[MuellerMatthew]

@IvanSanchez - No, I don't have a VM.

[IvanSanchez]

Apparently the "Chrome UI Team" decided that 100 pixels/wheel tick is "the best": https://bugs.chromium.org/p/chromium/issues/detail?id=38378

Comment 6 by [email protected], Mar 19, 2010

Regardless, the Chrome UI team thinks a 100 px scroll for an average-size window, which will scroll about 1/8th of the screen, is a good value, so in the end, we simply disagree.

[IvanSanchez]

See also https://bugs.chromium.org/p/chromium/issues/detail?id=521211 - worth reopening.

[MuellerMatthew]

To me it seems like there are 2 actions which should be taken.

1. We should upstream to chrome UI because their browser is responding differently in different OS's. If they want to have their browser scroll differently they can, although it is a reasonable expectation that it should function the same across OS platforms.
2. In order to fix zooming in Leaflet, I think we should simplify the function and stop using the number of pixels each browser has for their zoom levels when calculating zoom and instead count the number of zoom events and the zoom direction fired by the browser within the wheelDebounceTime timer and multiply it by a variable which functions similar to the wheelPxPerZoomLevel property which is used by map developers to indicate their preferred magnitude of each zoom. This way we can ensure that regardless of an individual browsers settings the map will always function and zoom as defined by a developer.

[IvanSanchez]

we should [...] stop using the number of pixels each browser has [...] and instead count the number of zoom events and the zoom direction

That's not an option. Two-finger scrolling on some trackpads (particularly in macbooks) trigger wheel events with a pixel distance. With your proposal, even tiny movements on the trackpad would start jumping the zoom levels around.

[IvanSanchez]

We also need to check scrolling on firefox on hi-dpi screens. According to the openlayers anad mapbox.js code, the pixel scroll values double there.

[ktoto]

@IvanSanchez Win 7 x64.

[IvanSanchez]

According to my VMs, this seems to happen also in Win10 (and I'll guess on Win8 as well).

[hyperknot]

@MuellerMatthew @ktoto we implemented a fix in Leaflet master, can you try it out in playground, selecting "Leaflet development version"?

[MuellerMatthew]

@hyperknot - Everything seems to be working in the "Leaflet development version" in the playground. I tested the scroll wheels in Chrome, and Firefox and the results were identical.

[SveinLoken]

Tested and found that line 230 in DomEvent.js should be changed to:
_wheelPxFactor: ((L.Browser.win && L.Browser.chrome)||L.Browser.safari) ? 2 : L.Browser.edge ? 3 : (L.Browser.gecko) ? window.devicePixelRatio : 1,

[IvanSanchez]

@SveinLoken Why?

[SveinLoken]

With default value 3 lines to scroll on Windows 10 64 bit I have this._delta:
Chrome: 50
Firefox: 54
Safari: 120
Edge: 122.7
IE11: 60

Without special handling of Edge and Safari it jumps 2 zoom levels having zoomSnap: 1 (default)

[SveinLoken]

I also had to change L.Browser.edge detection. For Edge sends "chrome" in navigator.userAgent.

Code snippet:
` ...
opera12 = 'OTransition' in doc.style,
edge = 'msLaunchUri' in navigator && !('documentMode' in document);

var touch = !window.L_NO_TOUCH && (pointer || 'ontouchstart' in window ||
        (window.DocumentTouch && document instanceof window.DocumentTouch));

L.Browser = {

    // @property ie: Boolean
    // `true` for all Internet Explorer versions (not Edge).
    ie: ie,

    // @property ielt9: Boolean
    // `true` for Internet Explorer versions less than 9.
    ielt9: ie && !document.addEventListener,

    // @property edge: Boolean
    // `true` for the Edge web browser.
    edge: edge,

    // @property webkit: Boolean
    // `true` for webkit-based browsers like Chrome and Safari (including mobile versions).
    webkit: webkit,

    // @property gecko: Boolean
    // `true` for gecko-based browsers like Firefox.
    gecko: gecko,

    // @property android: Boolean
    // `true` for any browser running on an Android platform.
    android: ua.indexOf('android') !== -1,

    // @property android23: Boolean
    // `true` for browsers running on Android 2 or Android 3.
    android23: android23,

    // @property chrome: Boolean
    // `true` for the Chrome browser.
    chrome: chrome && !edge,

`

[IvanSanchez]

@SveinLoken If you're going to propose code changes, do so in a pull request, not in comments.

[SveinLoken]

I am not an Leaflet expert, so please take this as a code suggestion.

[SveinLoken]

Last suggestion:
With zoomSnap != 0 it does not feel naturally that TouchZoom bounce back when not zoomed more than zoomSnap/2. This seems to give better handling:

`_onTouchEnd: function () {
...
if (this._map.options.zoomAnimation) {
var snap = L.Browser.any3d ? this._map.options.zoomSnap : 1;
if (snap) {
if (this._startZoom > this._zoom) this._zoom = this._zoom - snap;
else if (this._startZoom < this._zoom) this._zoom = this._zoom + snap;
}

...
`

[IvanSanchez]

@SveinLoken Do. Not. Suggest. Code. Changes. In. Comments.

There's no diff, they're impossible to read.

[SveinLoken]

Index: ../tjac-common/tjac-core/src/main/resources/META-INF/assets/jacillacore/leaflet1.0.0-rc.1+d4ea412/leaflet-src.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- ../tjac-common/tjac-core/src/main/resources/META-INF/assets/jacillacore/leaflet1.0.0-rc.1+d4ea412/leaflet-src.js    (revision 772:514824f6bb9038fa9f5d75aff0cc67033d4acb43)
+++ ../tjac-common/tjac-core/src/main/resources/META-INF/assets/jacillacore/leaflet1.0.0-rc.1+d4ea412/leaflet-src.js    (revision )
@@ -744,13 +744,14 @@
        ie3d = ie && ('transition' in doc.style),
        webkit3d = ('WebKitCSSMatrix' in window) && ('m11' in new window.WebKitCSSMatrix()) && !android23,
        gecko3d = 'MozPerspective' in doc.style,
-       opera12 = 'OTransition' in doc.style;
+       opera12 = 'OTransition' in doc.style,
+       edge = 'msLaunchUri' in navigator && !('documentMode' in document);


    var touch = !window.L_NO_TOUCH && (pointer || 'ontouchstart' in window ||
            (window.DocumentTouch && document instanceof window.DocumentTouch));

-   L.Browser = {
+    L.Browser = {

        // @property ie: Boolean
        // `true` for all Internet Explorer versions (not Edge).
@@ -762,7 +763,7 @@

        // @property edge: Boolean
        // `true` for the Edge web browser.
-       edge: 'msLaunchUri' in navigator && !('documentMode' in document),
+       edge: edge,

        // @property webkit: Boolean
        // `true` for webkit-based browsers like Chrome and Safari (including mobile versions).
@@ -782,7 +783,7 @@

        // @property chrome: Boolean
        // `true` for the Chrome browser.
-       chrome: chrome,
+       chrome: chrome && !edge,

        // @property safari: Boolean
        // `true` for the Safari browser.
@@ -9442,7 +9443,8 @@

    // Chrome on Win scrolls double the pixels as in other platforms (see #4538),
    // and Firefox scrolls device pixels, not CSS pixels
-   _wheelPxFactor: (L.Browser.win && L.Browser.chrome) ? 2 :
+   _wheelPxFactor: ((L.Browser.win && L.Browser.chrome)||L.Browser.safari) ? 2 :
+                   L.Browser.edge ? 3 :
                    (L.Browser.gecko) ? window.devicePixelRatio :
                    1,

@@ -10489,6 +10491,11 @@

        // Pinch updates GridLayers' levels only when snapZoom is off, so snapZoom becomes noUpdate.
        if (this._map.options.zoomAnimation) {
+           var snap = L.Browser.any3d ? this._map.options.zoomSnap : 1;
+           if (snap) {
+               if (this._startZoom > this._zoom) this._zoom = this._zoom - snap;
+               else if (this._startZoom < this._zoom) this._zoom = this._zoom + snap;
+           }
            this._map._animateZoom(this._center, this._map._limitZoom(this._zoom), true, this._map.options.snapZoom);
        } else {
            this._map._resetView(this._center, this._map._limitZoom(this._zoom));

[perliedman]

@SveinLoken thanks for working on this and your suggestions, but the format is really hard to work with.

Diffs are hard to read, and also you've made the diff against the _built_ version of Leaflet, instead of the actual source code.

If you fork the repo, commit your changes and create a pull request on GitHub, it's much more likely someone will use your changes. Not following this workflow creates a lot of unnecessary burden on the already pretty strained Leaflet devs!

[SveinLoken]

OK @perliedman and @IvanSanchez, not done that before, but I have now created pull request #4594

[niamleeson]

Is this issue fixed? I'm using the latest commit from master branch and I'm getting exactly triple zoom with mouse scrollwheel on Chrome Version 50.0.2661.102 m on @Windows 10. The map works fine on IE 11.

[SveinLoken]

@niamleeson See: #4592

[niamleeson]

@SveinLoken Is the problem caused by something deeper than Browser defaults? I'm using Chrome, through. I apologize if I'm missing something.

[MuellerMatthew]

@SveinLoken - can you check in the sandbox here whether the development version of leaflet is skipping levels? The console in the sandbox should show the zoom level when you zoom in or out.

[SveinLoken]

@MuellerMatthew With a screen resolution of 2560x1600 Edge jumps 2 zoom levels (on smaller window too). Chrome is OK for me.
@niamleeson Have you checked Windows setting of how many lines to scroll each time for the mouse wheel? (default is 3).

[niamleeson]

@SveinLoken I set mine to 9 lines at a time. I changed it to the default 3, but the problem still exists.

[mrkevinze]

I just tried rc2. My findings are in Windows 10, latest versions of Chrome, Firefox, Edge, and IE, a single scroll on a mouse indeed maps to a single change in zoom level under the default Leaflet settings, with my OS mouse wheel setting at 3 lines per scroll, which is great.

For Leaflet _users_, we may want to increase the wheelPxPerZoomLevel option to accommodate end users who may be using a slightly higher OS mouse wheel setting.

For example, with an OS setting of 7 lines per scroll, I needed to set wheelPxPerZoomLevel to 100 to get it to change 1 zoom level per scroll. Setting wheelPxPerZoomLevel to 100 also works fine for those with an OS setting of 1 line per scroll (from my tests).

[HarelM]

Is this issue really closed? I still get this with the latest stable version from bower and also in the link above on chrome + win 10, 4k screen.
What should I do?
Site is here:
http://israelhiking.osm.org.il/

[niamleeson]

@HarelM The problem with scroll zooming is still there.

[HarelM]

Can this issue be reopened then or it is fixed in version 1.0 which I heard was released?

[niamleeson]

@HarelM Im using 1.0. I dont think it is fixed.

[HarelM]

Is Leaflet dying? This issue is annoying and been open for a long time now. I just switched to 1.0 and was hoping to get rid of this issue...

[perliedman]

@HarelM I can't reproduce this issue on your site, neither on any other Leaflet map, I'm regularly using Chrome but also quite frequently testing in Firefox, IE11 and Edge. My guess is this is related to some user setting, or maybe the particular hardware you're using.

I think Leaflet is pretty far from dying, but I'll leave that up to others to decide. Having said that, we are mostly in maintenance mode: most issues are really support requests, and the remaining tend to be pretty specific edge cases where we still have to iron things out. Edge cases also tend to be time consuming and hard to find/test/fix, like this particular issue. Please note that of the currently active maintainers, none of us are working anywhere near full time with Leaflet, so we need users to step up and help with issues that are important to you.

[HarelM]

Chrome on windows 10. No problem reproducing.

[perliedman]

@HarelM ok, I'll trust you on this one and reopen, but please understand that it will not by itself fix the issue, since I don't have a method to reproduce it. The list of open issues is pretty long, and non-reproducibles without solution is not going to end up as high priority. So, it would be a _big_ help if you could narrow down what is triggering this issue on your system but not on most other.

[mrkevinze]

@HarelM In Windows 10 Settings > Devices > Mouse and touchpad > Choose how many lines to scroll each time, what is the slider value that you have set?

[HarelM]

I'll be happy to help, but I have no idea where to start. Current behavior is that on every scroll the map changes exactly 3 zoom levels. If you can provide me with a version with log traces I can I'll be happy to return the console output.

[HarelM]

I'm at work, I'll when I get home. But I didn't change those settings.

[IvanSanchez]

If you can provide me with a version with log traces I'll be happy to return the console output.

Something like this will help:

    L.DomEvent.on(map.getContainer(), 'wheel', function(ev) {
      console.log('Wheel event:', ev);
      console.log('Normalized wheel delta:', L.DomEvent.getWheelDelta(ev));
    });

Ready-to-use example at http://playground-leaflet.rhcloud.com/sije/edit?html,output . For a "clicky" mousewheel (the common ones with discrete, tactile-feedbacky wheel steps), the normalized delta should be 60px in firefox and 53px in chrome/chromium.

[HarelM]

Normalized wheel delta: 125
I have a 4k screen, might also be related to this issue...

WheelEvent:
bubbles:true
button:0
buttons:0
cancelBubble:false
cancelable:true
clientX:254
clientY:159
composed:true
ctrlKey:false
currentTarget:null
defaultPrevented:true
deltaMode:0
deltaX:-0
deltaY:-250
deltaZ:0
detail:0
eventPhase:0
fromElement:null
isTrusted:true
layerX:234
layerY:139
metaKey:false
movementX:0
movementY:0
offsetX:246
offsetY:151
pageX:254
pageY:159
path:Array(5)
relatedTarget:null
returnValue:false
screenX:1023
screenY:495
shiftKey:false
sourceCapabilities:InputDeviceCapabilities
srcElement:div#map.leaflet-container.leaflet-touch.leaflet-retina.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-touch-zoom
target:div#map.leaflet-container.leaflet-touch.leaflet-retina.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-touch-zoom
timeStamp:15211.830000000002
toElement:div#map.leaflet-container.leaflet-touch.leaflet-retina.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-touch-zoom
type:"wheel"
view:Window
wheelDelta:300
wheelDeltaX:0
wheelDeltaY:300
which:1
x:254
y:159

[perliedman]

@HarelM thanks for reporting! Regarding your comment about 4k screen, this comment seems applicable: https://github.com/Leaflet/Leaflet/issues/4538#issuecomment-218094677

@IvanSanchez if screen DPI affects the value we get, should we perhaps look att using devicePixelRatio when normalizing the delta? I have kept out of the scroll wheel business until now, so please forgive me if this is a naive suggestion.

[IvanSanchez]

if screen DPI affects the value we get, should we perhaps look att using devicePixelRatio when normalizing the delta?

@perliedman We do that, but only for Firefox. This is the first time I'm aware screen DPI affects Chrome. This is one of those "I hate the tiny differences between browsers" scenario, so your naïveté is forgiven :-)

[IvanSanchez]

I have a 4k screen, might also be related to this issue...

@HarelM Yeah, that might be it. There's some checking for hi-dpi screens over at https://github.com/Leaflet/Leaflet/blob/master/src/dom/DomEvent.js#L234 , and I must guess it is not covering your use case.

What's your OS, your exact version of chrome, your screen PPI, and the value of window.devicePixelRatio ??

[HarelM]

window.devicePixelRatio: 2.5.
Chrome: 57.0.2987.133
Windows 10 Home.
according to here: https://www.sven.de/dpi/
Display size: 19.17" × 10.79" = 206.81in² (48.7cm × 27.4cm = 1334.28cm²) at 200.26 PPI, 0.1268mm dot pitch, 40106 PPI²

[IvanSanchez]

I'm tempted to apply window.devicePixelRatio to the wheel delta normalization in addition to the chrome-in-windows 2x factor. In this case, the 125px normalized value would turn into 50px, which seems sane enough.

I do not have win10 machines around, so I'd like confirmation of the value of window.devicePixelRatio and the wheel delta in some other screens - namely, a MS Surface hi-dpi screen and a "classical" screen.

[HarelM]

I have win 10 on 3 machines I can check: 4k screen, an old PC I use as a TV and a small laptop.
Do you want me to report what I get with all the above in the playground code?

[IvanSanchez]

@HarelM Yeah, I think that would be helpful! Normalized wheel delta and window.devicePixelRatio should be enough.

[HarelM]

Results for chrome + win 10 on different machines:
you have the 4K screen in my initial comments.
The PC which I use as a tv has the following numbers:
Display size: 19.17" × 10.79" = 206.81in² (48.7cm × 27.4cm = 1334.28cm²) at 100.13 PPI, 0.2537mm dot pitch, 10026 PPI²
Normalized wheel delta: 75
window.devicePixelRatio: 1.5
My wife computer:
Display size: 19.18" × 10.78" = 206.76in² (48.71cm × 27.39cm = 1333.94cm²) at 71.23 PPI, 0.3566mm dot pitch, 5074 PPI²
Normalized wheel delta: 50
window.devicePixelRatio: 1
I believe this covers most cases.
Let me know when can I expect a realease with this fix...
The display size is probably wrong as the display sizes are different for the different machines...

[IvanSanchez]

@HarelM That's very useful info! I think that #5480 should fix the problem.

I've put up an example with the same changes at http://playground-leaflet.rhcloud.com/bisa/edit?html,output - can you please check if it feels OK in your machines?

[HarelM]

Thanks! Keep up the good work!

[grid-100]

The same behavior also happens in L.version 0.7.7, Chrome Version 58.0.3029.110 (64-bit)/Windows 10.
@IvanSanchez code at http://playground-leaflet.rhcloud.com/vumof/edit?html,output
```
var wheelPxFactor =
(L.Browser.win && L.Browser.chrome) ? 2 * window.devicePixelRatio :
L.Browser.gecko ? window.devicePixelRatio : 1;

L.DomEvent.getWheelDelta = function(e) {
return (L.Browser.edge) ? e.wheelDeltaY / 2 : // Don't trust window-geometry-based delta
       (e.deltaY && e.deltaMode === 0) ? -e.deltaY / wheelPxFactor : // Pixels
       (e.deltaY && e.deltaMode === 1) ? -e.deltaY * 20 : // Lines
       (e.deltaY && e.deltaMode === 2) ? -e.deltaY * 60 : // Pages
       (e.deltaX || e.deltaZ) ? 0 : // Skip horizontal/depth wheel events
       e.wheelDelta ? (e.wheelDeltaY || e.wheelDelta) / 2 : // Legacy IE pixels
       (e.detail && Math.abs(e.detail) < 32765) ? -e.detail * 20 : // Legacy Moz lines
       e.detail ? e.detail / -32765 * 60 : // Legacy Moz pages
       0;
}

before definingvar map = L.map('map', {}); ``` even makes the map jumps 4 zoom levels in chrome.
Will someone kind enough to build a patch for earlier version of Leaflet? at least to allow leaflet user some development time before upgrading. My map apps use a bunch of plugins.

[perliedman]

@grid-100 we're no longer actively maintaining 0.7, so don't expect anyone else to do that work.

If fixes for 0.7 is important to you, please consider stepping up and putting time into doing so.

[lovetostrike]

I'm also seeing this issue in 1.5.1 on chrome and on FF windows 10. Using scroll jumps 2 zoom levels instead of 1. Works fine on Edge.
Example https://jsfiddle.net/vd4f3oq9/

[olir]

I had the issue on win10 and chrome. Maybe it is outdated,
but i found a simple solution:

Go to your Windows Control Panel Mouse Settings and reduce the lines that are scrolled by one step to 5 or less.

[jeffreykog]

Issue is still not fixed on Leaflet 1.7.1, Chrome 86, Ubuntu 20.10. Issue exists on a PC with 4k monitors, so possibly related to pixel ratio. I configured 200% scaling, but window.devicePixelRatio seems to be 1.75.

It works fine on Firefox on the same PC. window.devicePixelRatio seems to be 2 on Firefox. Could it be related to a fractional pixel ratio?

Edit: Tested and verified it's also broken on Chrome when window.devicePixelRatio is 2. I have been using Leaflet since 1.5 and it has been broken ever since that version.

[zdila]

I found this issue too after upgrading to 4k monitor. FF is OK, Chrome and Edge takes 2 steps. Debian Linux.

@perliedman please reopen. Or should I report a new issue?

[johnd0e]

@jeffreykog @zdila

Or should I report a new issue?

Definitely you should open separate issue, describing relevant context.