Lagging when zooming in/out of the map (especially with free rolling mouse wheel)

[Codebreaker101]

maplibre-gl-js version: v4.5.0

browser: Chromium (Version 126.0.6478.126 (Official Build) (64-bit)) and their derivatives

Steps to Trigger Behavior

1. Go to https://maplibre.org/maplibre-gl-js/docs/ in a Chromium (or derivative) browser
2. Zoom in/out fast and you can see that it lags (especially noticable using a mouse with free rolling wheel (like mx master 3) )

Link to Demonstration

Laggy Chromium:

https://github.com/maplibre/maplibre-gl-js/assets/16204269/62e4ec0a-08e7-44ee-bec0-91e137971e0f

Smooth Firefox:

https://github.com/maplibre/maplibre-gl-js/assets/16204269/3848aa28-bce4-414f-a7dd-70caeed950e0

Expected Behavior

For smooth zooming to be the same as in Firefox browser

Actual Behavior

Lagging when zooming in Chromium

[HarelM]

I doubt there's a (easy) solution to this issue. You are welcome to investigate though.

[Codebreaker101]

This is what I have so far:

• the lag does not occur when DevTools are open in Chromium (interesting!)
• after adding a throttle function of 20ms on the HandlerManager.handleEvent function call the lag went away and the zooming was smooth (my screen is 60 FPS so throttle of anything higher than 17ms removes the lag)

Next I will investigate if there are more renders happening during a single frame received from requestAnimationFrame

[Codebreaker101]

The cause of the lag is an issue in the easing functionality in the scroll_zoom.ts. Will investigate further.

[Codebreaker101]

Figured it out!

https://github.com/maplibre/maplibre-gl-js/blob/0327486058079000767bac9e30111c84909c225a/src/ui/handler/scroll_zoom.ts#L293-L302

When the mouse scroll wheel is rotating fast the value of t is 0 which causes the easing function to return the same result, hence why the zooming stops. Eventually the value of t becomes >0 which causes the zoom level to change suddenly but then again it stops when t becomes 0 and that is the cause of the lag.

The fix that I found is the following:

let t = Math.min((browser.now() - this._lastWheelEventTime) / 200, 1);
if (startZoom !== targetZoom && t === 0) {
    t = 0.1;
}

Number 0.1 seems to be a sweet spot for smooth zooming.

This only affects fast wheel rotation so no other zoom methods nor regular (stepped) wheel rotation is affected.

I will prepare a PR with this fix. Pinging @anandthakker as he wrote the original code.

[HarelM]

Why is it 0? last wheel and browser.now are the same?

[Codebreaker101]

Yes, they are the same.

https://pastebin.com/KjKB68Nv

This is the log of me spinning the mouse wheel. You can see that most of the time the difference is 0. When I slow the wheel down at the end we can see the diff increase.

[HarelM]

Feel free to open a PR, I'll be happy to review it. Thanks for taking the time to investigate this!

[firatciftci]

Apologies for commenting on a closed issue, but I am still experiencing this issue in Chromium based browsers; zooming in and out using the mouse scroll wheel feels super choppy, unless the developer tools are open (this behavior is noted above in here, hence I believe it must point to the same issue). It appears that v4.5.1 did include the fix relating to this bug (hence the issue is closed and marked as completed), so I am not sure how/why it persists on my end. I have tested this on v4.5.1 locally and in production for personal projects and the bug is present in all.

Here is a replication of the original example above from https://maplibre.org/maplibre-gl-js/docs/: 1) Firefox (no issues):

https://github.com/user-attachments/assets/805152ac-ef90-415c-849f-7ae14deb49f6

2) Chrome (laggy):

https://github.com/user-attachments/assets/04a8c746-981b-447c-8b7d-ec9d15cd2207

3) Chrome (no issues, developer console open):

https://github.com/user-attachments/assets/8334dd3f-97c4-43bb-8f3b-ac0830a987f0

Is there any chance that the fix above was not wholly implemented and/or included in the latest NPM version properly?

[HarelM]

The PR was merged on Jul 1. The release of 4.5.1 was done on Aug 1. It might be that you have a cached version and thus the fix is only visible when the dev tools are open? In any case, please let me know if you need me to reopen this issue.

[firatciftci]

My mouse scroll gets recognized as a trackpad more often than not when using stepped scroll (mx master 3, magnetic stoppers) so testing is a bit tricky (and I don't have a mouse with regular scroll wheel).

This sentence from PR #4366 is relevant, as I am also using an MX Master 3 mouse with stepped scroll on – using a regular mouse does not exhibit this laggy behavior. That said, Firefox and Safari do not have this lagginess when using an MX Master 3, but Chrome does; would this be a Chromium issue rather than a maplibre one?

[HarelM]

Sounds like a Chrome issue to me...

[firatciftci]

Same here, but still unclear as to why having the dev tools open fixes the issue on Chrome...

[Monstrofil]

@firatciftci have you managed to solve the issue? I also see stuttering when zooming on latest 4.5.2 version.

Moreover, when I downgrade to 4.5.0, it's gone.

Here is a smooth scroll: https://github.com/user-attachments/assets/33d1df10-0553-40ef-ad02-8f6dd52020bb

And here are some random zoom jumps on latest version: https://github.com/user-attachments/assets/579a5a44-a1eb-4866-9485-8d0fda4e7925

[firatciftci]

@Monstrofil I haven't had the time to look more into it yet – are you also using an MX Master 3?

I can confirm that reverting back to 4.5.0 fixes the issue. @HarelM, as counterintuitive as it may sound, it might make more sense to revert the 'fixes' in PR #4366 – the changes in src/ui/handler/scroll_zoom.ts seem like a real regression in scroll zooming for certain mouse types. It might make sense to re-open this issue, and I will get to work on filing a new PR to see what I can do to address this once-and-for-all.

[HarelM]

Feel free to submit a PR that reverts this fix.

[Monstrofil]

@Monstrofil I haven't had the time to look more into it yet – are you also using an MX Master 3?

No, just a generic A4tech mouse.

[m345054]

I'm experiencing the same issue on chrome with a Logitech G403