search

davidjerleke / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.
https://www.embla-carousel.com
MIT License
5.42k stars 164 forks source link

scrollTo with jump doesn't work on iOS #514

Closed dlhagstroem closed 1 year ago

dlhagstroem commented 1 year ago

Bug is related to

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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:

Best, David

dlhagstroem commented 1 year ago

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:

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 commented 1 year ago

Hi @davidjerleke ,

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

davidjerleke commented 1 year ago

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 commented 1 year ago

Totally understand, thank you for your efforts!

/Dennis

davidjerleke commented 1 year ago

@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 commented 12 months ago

@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 commented 12 months ago

@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 commented 12 months ago

@dlhagstroem thank you for confirming 👍🏻!

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

Allt gott, David