search

saimn / sigal

yet another simple static gallery generator
http://sigal.saimon.org/
MIT License
893 stars 170 forks source link

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

Open thomasdn opened 1 year ago

thomasdn commented 1 year ago

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

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

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

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.