scrollTo with jump doesn't work on iOS

[dlhagstroem]

Bug is related to

• embla-carousel (core package)

Embla Carousel version

"embla-carousel-react": "v8.0.0-rc06",

Describe the bug

scrollTo with jump param does not always work in iOS 16.3.1 (Chrome, Safari browsers tested)

CodeSandbox

https://codesandbox.io/s/xzgjsj

Steps to reproduce

1. Go to https://xzgjsj.csb.app/ on an iPhone
2. Click on thumbnails to switch carousel image
3. Note that image in carousel (slide) is not always set to the active image

Expected behavior

The carousel should show the correct slide.

Additional context

This seems to happen only when jump parameter is set to true when calling emblaApi.scrollTo function like this:

emblaApi.scrollTo(scrollToIndex, true);

Without jump param, carousel work flawless :)

[davidjerleke]

Hi @dlhagstroem,

Thanks for a complete bug report. I will look into this and let you know what I find when I've done so.

Best,
David

[MaxDesignFR]

I'm chiming in: I noticed just recently that Embla fluidity was not so great on my android phone (decent but not great, considering I'm on a pixel 4a which is a good phone), I wonder if will-change:transform on the container could somehow help with this bug (worth a try)?

Anyways, I did do that in my project and the carousel fluidity feels significantly better, nearly perfect (even though it was usable before, it didn't feel completely right). I'm not sure if it's due to the pre-release: if you like @davidjerleke I can give a try without will-change:transform on an earlier version. But right now it seems like a must-have in my project. I won't diverge more, but I figure this is worth trying for this bug.

[dlhagstroem]

I'm chiming in: I noticed just recently that Embla fluidity was not so great on my android phone (decent but not great, considering I'm on a pixel 4a which is a good phone), I wonder if will-change:transform on the container could somehow help with this bug (worth a try)?

Anyways, I did do that in my project and the carousel fluidity feels significantly better, nearly perfect (even though it was usable before, it didn't feel completely right). I'm not sure if it's due to the pre-release: if you like @davidjerleke I can give a try without will-change:transform on an earlier version. But right now it seems like a must-have in my project. I won't diverge more, but I figure this is worth trying for this bug.

Thanks for your suggestion, we have tried with no luck. The root cause seems to be something else :/

[davidjerleke]

Thanks for the help @MaxDesignFR!

@dlhagstroem I can confirm that this is a bug. Try the following CodeSandbox and let me know if it's working as intended:

• Code view
• App view

Best,
David

[dlhagstroem]

Thanks for the help @MaxDesignFR!

@dlhagstroem I can confirm that this is a bug. Try the following CodeSandbox and let me know if it's working as intended:

• Code view
• App view

Best, David

I gave it a good round, trying to reproduce the issue. No success. Now I am curious about the solution :) (and of course the cause)

[dlhagstroem]

Hi @davidjerleke ,

would it be possible to get a pre release/rc version including this fix?

[davidjerleke]

Hi @dlhagstroem,

It’s on its way and will be released with v8.0.0-rc08. But can’t give an exact ETA because I’m maintaining this library in my spare time.

Best,
David

[dlhagstroem]

Totally understand, thank you for your efforts!

/Dennis

[davidjerleke]

@dlhagstroem I just released v8.0.0-rc08 with a bug fix for this. Give it a try and see if it solves the problem.

Best,
David

[davidjerleke]

@dlhagstroem just wanted to let your know that I would recommend you to try the latest version which is v8.0.0-rc11 at the time of writing. v8 releases are still pre-releases (rc) so they often include bug fixes.

I would appreciate if you could let me know if v8.0.0-rc11 solves this problem.

Best,
David

[dlhagstroem]

@davidjerleke sorry for not answering. We upgraded to rc10 a couple of days ago and that solved our issue. We just tried 11 and still works :)

Again, thank you so much for your efforts!

[davidjerleke]

@dlhagstroem thank you for confirming 👍🏻!

Ha en trevlig semester om du inte redan haft den 🙂.

Allt gott,
David