"Wobble" effect when slowly scrolling

[bytasv]

Hello,

I'm currently on:

"react-infinite-viewer": "^0.16.4",

and I noticed a weird behaviour (I don't think it's versions specific though), wondering if there is a way to solve that. When I try to pinch/scroll zoom and I do it slowly the viewer seems to kinda "wobble" in all directions. It can also be seen on the demo page here: https://daybrush.com/infinite-viewer/

My assumption is that there might be some dimension rounding happening when scroll calculations are performed and because of that the viewer might be "jumping a pixel" back and forth which creates that wobble effect.

Lemme know if you can reproduce it as well and if you have any ideas what might be causing this? I'm happy to open PR if you could share the place that might be responsible for this. Thank you

[daybrush]

@bytasv

Do you have any gif or videos? It's hard for me to check out.

I couldn't check out the wobble effect in the demo.

[bytasv]

https://user-images.githubusercontent.com/437214/191114914-ac1cafd7-39eb-41a1-a5d5-59dcf1efccdc.mov

It's wobble/some kind of swirl happening (not sure how to best call it). You should be able to see that when it zooms it does not remain on the same point

[daybrush]

@bytasv

You are right. The round code causes wobble effect.

The round code was removed. react-infinite-viewer's new version(0.16.5) is released. Check it again.

(Guides, Ruler)' s Wobble Effect will probably be fixed tomorrow.

[bytasv]

Awesome! Thanks a lot once again for a very quick fix 🙇

[daybrush]

@bytasv

The guides have also been updated.

The website also works normally.

const zoom = viewer.zoom;

horizontalGuides.scroll(e.scrollLeft, zoom);
horizontalGuides.scrollGuides(e.scrollTop, zoom);
  
verticalGuides.scroll(e.scrollTop, zoom);
verticalGuides.scrollGuides(e.scrollLeft, zoom);

The operation of setting zoom operates asynchronously.

So, it is drawn with the updated viewerZoom through the method.

[bytasv]

Wonderful 👨‍🍳 works great now! Thanks