Zooming out and in with mousewheel

[dbayonacode]

When zooming with the mouse wheel the zooming happens incrementally but when zooming out it goes directly to the minimum scale, it does not scale down incrementally, fluently. I can see the same behaviour in the demo, is there a way to achieve the same effect when zooming in and out with the mouse wheel ?

[TimUnderhay]

Hi @dbayonacode, I can't replicate that behaviour with the demo. What browser and platform are you using?

[dbayonacode]

Hi @KensingtonTech , thanks. Yes, I can see it happens with some browsers only. Just tested with Firefox and it works perfect, but with Chrome Version 83.0.4103.116 and Microsoft Edge Version 83.0.478.56 I can see the issue. Thanks again.
Just created a little video for you to see the issue:
https://vimeo.com/433262890

[TimUnderhay]

Thanks for the video. It should be much smoother than what the video depicts -- I've honestly no idea what's going on there. Is that a VM without video acceleration, by chance?

I have tried it using the same Chrome version on both Mac and Windows and can't reproduce the problem. It zooms in and out smoothly.

[TimUnderhay]

@dbayonacode do let me know if you're using a machine / VM that doesn't have video acceleration. I will otherwise close soon

[dbayonacode]

Thanks @KensingtonTech . As i mentioned, it happens with Chrome and Microsoft Edge but not with Firefox, and I am using the same machine. I doubt it has something to do with the video acceleration, I am not using a VM either. Bear in mind it only happens using the mouse wheel but using the panZoomAPI for zooming it works perfectly. Weird :( . Any other idea, Thanks so much?

[TimUnderhay]

I agree that it's not video acceleration. I can only surmise that something on your PC is interfering with mouse 'wheel' events.

I've written a quick and dirty app that spits out wheel events to the browser console as you spin your mouse wheel over a div. It should output a fast stream of lines to the console. Though I could be wrong, I suspect that on your system, you will only see a few lines rather than a stream.

https://angular-ivy-nyoskx.stackblitz.io/

[dbayonacode]

Thanks @KensingtonTech , I tried the example and it is printing in the console one line for each scroll up and down movement of the mouse wheel, which is what we expect I guess.
In my code, I have changed my panzoomConfig setting tot he following:

public panzoomConfig: PanZoomConfig = new PanZoomConfig({ freeMouseWheel: false, freeMouseWheelFactor: 0.08, zoomStepDuration: 0.2, zoomLevels: 10, });
Basically, I have change freeMouseWheel from true to false and now I have a nice smooth experience when zooming out. So it fixed the issue for all browsers.
Any thoughts?

[TimUnderhay]

freeMouseWheel zooms a small amount with every tick of the mouse wheel. Disabling it means that it zooms in / out one full zoom level with every move of the wheel. That explains why it’s working smoothly.

There is some software or setting on your system that has changed the behaviour of the mouse wheel. I would look for that, as I don’t believe there is anything wrong with ng2-panzoom.

[dbayonacode]

Thanks @KensingtonTech. yes, it is a mystery. The weird thing is that with Firefox the issue does not happen. Tested in another machine and same issue for Chrome and Edge (Chromium). However, freeMouseWheel: false solves the issue for me, so feel free to close the ticket if u want, and thanks for your amazing support.

[TimUnderhay]

I just found this on Windows 10 -- could it be the source of your problems?

[TimUnderhay]

If not that, is there some sort of trackpad software on the PC’s? I’ve read that, for instance Lenovo software, can have this effect and may need an exception made for Chrome in the settings.

[TimUnderhay]

I'll go ahead and close then. Take care, @dbayonacode!

[dbayonacode]

Thanks @KensingtonTech . Great support