Autoplay timer keeps running, even when viewport is inactive

Bug is related to

• embla-carousel (core package)
• embla-carousel-react
• embla-carousel-autoplay
• embla-carousel-docs (documentation website)

Embla Carousel version

• embla-carousel-autoplay: v6.0.2
• embla-carousel-react: v6.0.2

Describe the bug

The bug seems to cause two problems.

Rushing through slides on reactivation of viewport

After having the carousel with autoplay in an inactive viewport (tab which is not displayed) and activating it again (coming back to the tab) after a while (10mins for example), you can see how the carousel rushes through several slides until it catches up with the timer.

https://user-images.githubusercontent.com/1105080/149907898-f7a3bdf0-038c-4362-9a4b-f6b36fc98dd2.mp4

Carousel disappears entirely

When leaving the carousel with autoplay for even longer in the background, the carousel will disappear. The reason for this is that the transform style on the carousel container has such a high negative value to move in in the x axis, that some browsers (Firefox especially) refuses to render the whole <div>.

CodeSandbox

• https://codesandbox.io/s/embla-carousel-autoplay-react-forked-openscript-ltd-slider-8h5bh

Steps to reproduce

1. Open CodeSandbox mentioned above
2. Leave the tab for some time in the background
3. Come back to the tab and see the carousel rushing through the slides for a while

Expected behavior

• The timer should be stopped, when the carousel is inactive.

Additional context

Problem observed with

[davidjerleke]

Hi @openscript,

This problem should be fixed in v6.1.1. Please try it out and let me know if it solves the problem.

Best, David

[openscript]

Hi David @davidjerleke

Thank you so much for the quick fix. It solves the problem 😃

Robin