SegmentedControl's value is shifted to the left after opening it in a Modal

What package has an issue

@mantine/core

Describe the bug

Create a Modal with a SegmentedControl inside of it, and store the SegmentedControl’s value with useState. Click the SegmentedControl to change it’s value. Close the modal, and open it again. Now the displayed handle is shifted to the left by a bit (I’m not sure if it’s called a “handle”, but this is what I mean).

In this picture I have “Value 4” selected:

Here’s a video where I show the steps to reproduce the bug:

https://user-images.githubusercontent.com/38920928/147412465-305fca23-9b90-4e0a-9a73-98dfb1e7df1c.mp4

In which browser did the problem occur

Firefox, Chrome, Edge

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/priceless-bassi-yozl1

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

No response

[rtivital]

Thanks for debugging, resize observer must be getting confused by transforms, we’ll see how to make it work. @achmurali you were interested in the root cause of this issue

[rtivital]

@Eldemarkki thanks for investigation, it helped a lot!