Carousel transition breaks when rendered inside a Modal

[gigobyte]

What package has an issue

@mantine/carousel

Describe the bug

When rendering a Carousel inside a Modal, transitioning to the next slide adds more pixels to translate3d than necessary, in fact it consistently adds 10% of the slide width on top of the desired transition pixels.

This problem is not reproducible if the Carousel is not rendered inside a Modal OR if the Modal is opened on first render (which can be seen in the demo).

What version of @mantine/hooks page do you have in package.json?

5.0.3

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

https://codesandbox.io/s/hungry-grass-jknqq4?file=%2Fsrc%2FApp.js

Do you know how to fix the issue

A temporary fix for me right now is to not render anything when the modal is not opened, like so:

if (!open) {
  return null;
}

return (
  <Modal
    opened
    ...
  />

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

Yes

Possible fix

No response

[rtivital]

Hi @gigobyte, Modal animation causes this issue. When modal is opened, embla carousel is init before the animation ends which, I suppose, causes embla to calculate slides offset incorrectly. It is fixable if you call reInit method after animation ends – https://codesandbox.io/s/lively-flower-ts379u?file=/src/App.js

I've opened a discussion about it in embla repository, let's see if we can fix that – https://github.com/davidjerleke/embla-carousel/discussions/346

[rtivital]

Fixed in 5.1.5, will require usage of useAnimationOffsetEffect hook – https://mantine.dev/others/carousel/#carousel-container-animation-offset

[gigobyte]

Thanks!

[davidjerleke]

Hello everyone,

Just wanted to let you know that I released stable v8.0.0 yesterday and among many other improvements, this has been fixed:

• https://github.com/davidjerleke/embla-carousel/pull/633.

This means that useAnimationOffsetEffect won't be needed anymore when Embla is upgraded to v8.0.0.

Best, David