Closed gsi-yoangainza closed 2 years ago
Hi @gsi-yoangainza,
Thank you for your question. I don’t have access to your setup, but it shouldn’t get slow.
What's happening is that when the carousel loads a large number of pictures, in IOS the transition becomes very slow.
How much is a large number of pictures? When I created the infinite scroll example on the documentation website, I tested it with hundreds of images and it didn’t stutter at all. It worked smoothly. I think I tested with over 200 images.
If you’re loading more than that in a horizontal carousel, I would suggest you to consider alternative ways of dealing with your content. For example, you can setup “infinite scroll” and load 200 images in chunks of let’s say 10 images at a time, as the user scrolls. And if the user scrolls to the end you can put a link at the end of the carousel that takes the user to a page with the content displayed vertically without a carousel.
As I mentioned, I don’t have access to your setup so there is a possibility that something in your setup is causing these performance problems.
Also, we added a zoom library and that make the transition even slower.
I have no control over how other libraries affect the performance or not. The only thing Embla does is to transform your container (translate3d), and if loop is enabled it flips slide positions to create the loop effect. It doesn’t touch the DOM in any other way. And if it gets slower when adding the zoom library, it’s a good hint that you probably should investigate the zoom library. I don’t think Embla should get the blame for this.
Kindly, David
Hi @davidjerleke!
Thanks a lot for the quick response!
We are testing this with just 65 pictures. This is what the first video shows...
We are actually using a kind of infinity scroll which is loading more pictures (15 each) when the user is getting close to the limit established. What we noticed is that if we use the "speed" parameter and we set that to 50, for instance, navigating with the arrows (clicking) is really fast, but navigating with dragging (mobile/tablet) is still the same. Does that indicates anything to you? A hint to know more what's the problem would help us here :)
As this happens just in iOS we are also considering if properties like "will-change: transform" are not working correctly in iOS for some reason, but we do have properties like "-webkit-transform: translate3d(0, 0, 0);" already set.
About the slowness, it happens with zoom but also without zoom, so we are trying to investigate all possible problem sources. You are probably right and this is probably not a problem with Embla, but we needed to ask just in case and above all to see if you have any idea why this could happen. Is there any way to optimize or consume less resources? When this slowness happens the CPU is usually high...
Thanks a lot for your help!
Yoan
Hi @gsi-yoangainza,
As I mentioned, over 200 slides with images worked smoothly when I tested it in different browsers (including the OS and browsers you mention).
I’m going to get straight to the point (without any intention of being rude):
Without a reduced test case, which is a CodeSandbox that clearly demonstrates the problem (with unnecessary details stripped), I’m not going to continue guessing what could be wrong with your setup. It could literally be anything causing this so guessing is pointless and incredibly time consuming.
If you want me to debug this further you’ll have to provide that CodeSandbox. This is clearly stated under the Bug reports section in the contribution guidelines. Please let me know if you intend to provide it or not.
Thank you for understanding.
Best, David
Bug is related to
-Using embla-carousel with a large number of images on IOS (Safari, Chrome, Firefox)
Embla Carousel version
Describe the bug
Hi there!
I'm not sure if it's a bug or not, but the behavior of transitions between slides when scrollNext() is odd in my application.
I'm using the carousel to load several images of a gallery in a user profile. The loaded images are
<picture>
tags with the<img>
tags inside. Using react, we created the Picture component with the above structure: a<picture>
tag that contains the<img>
tag.What's happening is that when the carousel loads a large number of pictures, in IOS the transition becomes very slow. We have used lazy loading, to ensure that when we upload the first picture we already have other 30 in queue. When it loads less pictures still happens but less.
Also, we added a zoom library and that make the transition even slower.
This is a video showing the slowness with a bigger component and zoom functionality: https://user-images.githubusercontent.com/85452393/170327658-2174ee88-0a37-4767-bf22-6d764247488b.mp4
And this is the smaller component without zoom, which is much faster in the transitions, but sometimes it get slower (picture 22, for instance): https://user-images.githubusercontent.com/85452393/170340541-5de6da83-537b-449e-90fd-8accb9e70e51.mp4
The following image is showing the DOM when we scrolled through 28 pictures already, and that's why I think this shows -2800%, not sure if this it is normal behavior or not. When the lazy loading loads more pictures the number of elements increases.![image-console](https://user-images.githubusercontent.com/85452393/170340701-e0738afb-1d6e-4ae7-80f4-adecedc281ca.png)
I'm not sure if it is because we are loading the images the wrong way or it's some kind of conflict with IOS operating system. So I would appreciate some advice about it.
Thanks a lot in advance!