Performance Issues and loosing state on Mobile

[PeterKow]

Describe the bug

When sliding images on a mobile phone, there are some bugs:

• lag for transition and breaking images
• losing state when sliding back and forth
• thumbnails don't sync with the main image

Example video

Based on the official website:

https://github.com/user-attachments/assets/33802cf0-ad3e-499b-a467-285bc8811005
https://github.com/user-attachments/assets/66a9add3-a3b0-4a63-97c6-8bccf74ce154

Example lags:

Reproduction

Devices

Use on mobile phone. (Mine iPhone 14 Max)
Browsers: Chrome and Safari

Tested urls:

• https://fancyapps.com
• https://fancyapps.com/carousel/

Versions:

"@fancyapps/ui": "^5.0.36"

Additional context

No response

[fancyapps]

Hi,

Well, the performance of the software has been tested on various devices, including quite old iPhones, and everything works beautifully. It has also been used and tested by hundreds of developers and you are the first one to complain about such a thing.

So I'm quite confused as to what is so special about your device, have you somehow enabled a "low performance" mode or something?

[PeterKow]

Hi, I am also not sure where the problem is, as the iPhone 14 Pro Max is not an old phone and should normally handle it. Tested on fully charged with no "low performance"

Also, I've been using previous v4 and I believe it was working ok. So after upgrading to Paid version there is a downgrade in performance. I've read that these might be related to the latest Safari engine updates, but it also happen on Chrome.

This bug was reported by our customers, as I haven't noticed it for 3 months. Now I tested and can confirm on other mobiles as well.

Can you take a look into the problem and test on different mobiles, as these bugs are looking really bad on the website :/

Let me know if you have more question, thanks

[fancyapps]

My concern is that I can't reproduce the issues on any device I have access to unless I enable "Low Power Mode". Could this be the reason in your case? iOS seems to drop the frame rate to 30 fps when in low power mode. Not sure what to do here, maybe animations should be disabled when this mode is detected (using hacky solution).

[PeterKow]

Hi thanks, I've tested on another iPhone 14 and it was working ok. Even with "Low Power Mode" it's sluggish but not breaking.

I just realised that my iOS is 18.0 Beta, and that might be related to the new Safari engine update, so this might be the problem that is coming.

Nevertheless, I am worried about our customers who have just slow/ old phones, maybe it's possible to have some generic fallback for less CPU-hungry animations?

[fancyapps]

The oldest device I have access to is an original iPhone SE from (I think) 2016 and the animations work very well, absolutely no issues. In fact, I had used it for testing while working on animations for the best possible performance.

Will try to test on iOS 18, thanks for the info!

[devjam1n]

Sliding the carousel in Safari (iPhone 11 - iOS 17.5.1) lags very much in low power mode (LPM). This is unusual for carousels. I see them working smooth on other websites also with it enabled.

[fancyapps]

Looks like iOS 18 Safari needs to enable CSS hardware acceleration for carousel slides. This seems to fix it:

.f-carousel__slide {
  transform: translateZ(0);
}

This will be included in the code in the next update.