Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Album with hundreds of thumbnails crash Safari on iOS devices #497

Open
thomasdn opened this issue Aug 30, 2023 · 9 comments
Open

Album with hundreds of thumbnails crash Safari on iOS devices #497

thomasdn opened this issue Aug 30, 2023 · 9 comments
Labels

Comments

@thomasdn
Copy link
Contributor

Hi,
A gallery with hundreds of images seem to crash Safari on iOS. Since all browsers on iOS internally use Safari for rendering, this means that effectively, iOS users (iPhones, iPads, etc) are not able to access Sigal albums with hundreds of images in them.

I have not been able to find the exact number of thumbnails that causes this to occur. Indeed, it does not seem to be a specific number. It seems the actual images matter. So maybe it is relating to some memory/buffer size.

It seems to me that the reason this happens is that Sigal's gallaria uses its own custom JS code to implement lazy loading of thumbnails. My hypothesis is that this lazy loading code builds up some huge javascript object that causes Safari to run into some memory limit and the page crashes.

I think the custom JS implementation of lazy loading could be omitted entirely and replaced by built in HTML features for lazy loading, namely:

<img src="image.jpg" alt="foo" loading="lazy" />

Would it be feasible to change this in Sigal's gallaria?

@thomasdn
Copy link
Contributor Author

I have produced a simple example gallery here that causes the page Safari on iPhone to crash.
I have tested this on at least iPhone 8, iPhone 12, iPhone 13.

URL is: http://129.151.214.239/tmp/1/sigal/
(I have changed to actual original pictures in this gallery with simple placeholder images. But the crash still occurs even though these images are very small)

Steps to reproduce:
Open the url http://129.151.214.239/tmp/1/sigal/ on an iPhone.

I have attached a tar.gz with the example gallery in it. This is just a static html gallery that can be opened locally on a webserver. (e.g. start a python webserver, etc. in the folder)

sigal-crash-safari-on-iphone-example.tar.gz

@saimn saimn added the galleria label Sep 29, 2023
@saimn
Copy link
Owner

saimn commented Sep 29, 2023

No sigal is using Galleria's API for lazy loading (https://galleriajs.github.io/docs/api/methods.html#lazyloadchunks-size-delay). Maybe there is a bug somewhere, maybe it was fixed on Galleria's side, maybe not.
Actually last release of galleria is from 2019, and this is the one we use ....

@thomasdn
Copy link
Contributor Author

Yeah, I think the problem is that Galleria implements their own Lazy loading instead of using the built in HTML5 loading="lazy" attribute.
However, as you mention, Galleria seems to be abandoned (latest release is from 2019). So I was hoping it would be possible to fix this in Sigal.

@rafalkrupinski
Copy link

rafalkrupinski commented Nov 18, 2024

What do you mean by lazy loading? Looking at the developer console, all images are fetched eagerly (firefox/linux)

@thomasdn
Copy link
Contributor Author

What do you mean by lazy loading? Looking at the developer console, all images are fetched eagerly (firefox/linux)

That's odd. I just did a test in Firefox. So, I guess you're right. It might not be lazy loading at all. However, something seems to be loading the images using javascript in a different way than what native html/css would do.

This is how I did my test:

When I load a gallery album with hundreds of images in it while having developer console opened on the Network tab, this is what I see:

image

It seems all the images are requested eagerly from the server in "batches" as indicated by the arrows. While this happens, some kind of small progress-bar is shown to the user.

But even though they are requested immediately, they are not loaded/shown immediately. Instead they seem to be loaded into the thumbnail view using some "spinning" place holder effect. It looks like this:

image

This also means it takes fairly long time before you can actually see the thumbnails if you open a large album and immediately scroll to the bottom.

I guess you are exactly right that what sigal is doing is not lazy loading at all. It just takes very long time which caused me to believe it was lazy loading.

Nonetheless, it seems to be this behavior that is causing Safari to crash on mobile devices. I suppose it is hitting some memory limit due to the javascript probably loading all the images into an array or something like that. I am not sure and I haven't looked into the javascript as I lack the experience/skills to locate and fix the bug.

@saimn
Copy link
Owner

saimn commented Nov 20, 2024

this galleria theme (folio) displays all thumbnails in the page so maybe try another galleria theme ?
it seems thumbnails are (all or only visible ones?) loaded when page is loaded, the lazy loading by chunks mentioned above is only for images, not thumbnails.

@rafalkrupinski
Copy link

all images are fetched, at least on the page mentioned in in #497 (comment)

@thomasdn
Copy link
Contributor Author

this galleria theme (folio) displays all thumbnails in the page so maybe try another galleria theme ? it seems thumbnails are (all or only visible ones?) loaded when page is loaded, the lazy loading by chunks mentioned above is only for images, not thumbnails.

Am I understanding this correctly, that this bug (Safari crashing) is caused by the Galleria theme. And the Galleria theme is not updated since 2019 - perhaps the project is abandoned?

Should I open a ticket on the Galleria project instead?

@saimn
Copy link
Owner

saimn commented Nov 20, 2024

Galleria is unmaintained (last commit from 2020) and I'm not aware of a fork that would be community maintained.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants