When using vite and resizing from other than right and bottom - the element is shaking weirdly

[iongion]

Overview of the problem

I'm using react-rnd version [10.4.11]

My browser is: Any browser

I am sure this issue is not a duplicate? YES

Reproduced project

• This is vite based - https://codesandbox.io/p/devbox/easy-peasy-v6-devbox-55sgc7
• This react-scripts based - https://codesandbox.io/p/sandbox/easy-peasy-v6-wr34tl

Description

When the bundler is vite https://vitejs.dev/

• When resizing from other than right and bottom - the element is shaking weirdly

When the bundler is react-scripts https://www.npmjs.com/package/react-scripts

• When resizing from other than right and bottom - the element is not shaking and behaves as expected

Steps to Reproduce

1. Resize the pink box in the demo app in vite demo https://codesandbox.io/p/devbox/easy-peasy-v6-devbox-55sgc7
2. Resize the pink box in the demo app in react-scripts demo https://codesandbox.io/p/sandbox/easy-peasy-v6-wr34tl

In 1 is wrong, in 2 is correct

Expected behavior

Not to have that shaking effect when resized from left or top even when using vite bundler

Actual behavior

Strange shaking / wobbling when resizing

[vadimkhrapov]

Looks like this is a problem in the re-resizable lib, react-rnb using it.

[juanhobello]

I am having the same problem. Has a solution been found yet?

[bokuweb]

@iongion Thanks for your report. I'll do some investigation.

[apracode]

I also have this problem, have you found any solution? @iongion @juanhobello @bokuweb

[iongion]

@apracode I am sorry, I am just putting up with it for now as the project I am using it into has a lot of other things to be done. I hope I can return at a certain moment and dig deeper. If it is a bundler issue, might be a css issue or some dead code elimination ... needs investigation.

[steviant]

I found downgrading to 10.1.10 fixed that wobble effect. Completely accidental discovery - the demos and examples I could find online that covered what I was looking for were using that version, and it worked. Newer versions have the wobble.

[valerii15298]

I confirm. Downgrading to react-rnd@10.1.10 fixes the issue.

[valerii15298]

The latest version which works without this bug is: "react-rnd": "10.4.4" put exactly like this in your package.json.

@bokuweb This bug is reproducible on version 10.4.5 but with 10.4.4 everything works fine. So bug occurred on version 10.4.5.

[bokuweb]

@valerii15298 Thanks.

[bokuweb]

@iongion @valerii15298 @steviant @apracode @juanhobello @vadimkhrapov

We have fixed the issue. This problem occurred in versions 10.4.5 and later, regardless of Vite. Please use version 10.4.12. If the issue recurs, please reopen the ticket.