1

I'm working on a photoswipe gallery for my portfolio site, built using Hugo. The code isn't the cleanest, but it's a huge upgrade from my current build using HarpJS. I've also learned a lot about AWS and GCP in the process.

Everything works on desktop, and until yesterday, everything worked on mobile.

I ran Primitive on all the thumbnails, and output SVG's with 2500 shapes. Which is probably major overkill, but I love the visual effect from that level of detail. It becomes very painterly.

Now the page crashes constantly in Mobile Safari, which stupidly closes out the mobile web inspector on my Mac - so I'm not sure where the breakdown is occurring.

Each SVG is around ~150kb. When I swap the SVG's and use JPG's again, everything works fine, even though that makes the page size larger. I have a suspicion that my lazy-loading plugin isn't working, but I'm not certain. (I'm using Unveil - luis-almeida.github.io/unveil.)

Here's a link to the gallery page on my staging bucket: staging.iammatthias.com

Any help/advice would be much appreciated!

iammatthias
  • 23
  • 4

1 Answers1

0

This is without doubt a memory limitation problem. Safari mobile is known for having memory limitations when it comes to rendering svgs. There are articles to be found explaining the issue - but it boils down to strictly limiting the amount of SVGs you toss on a page to be rendered all at once (your site even struggles on desktop safari with all those SVGs). The only way around it with iOS is to lazy load the images from your server a few at a time or switch to not using SVGs for this use case.

A couple links for additional reading:

https://www.richdynamix.com/blog/svg-vs-png-in-sprites-an-ios-issue

https://discussions.apple.com/thread/7530327?start=0&tstart=0

Korgrue
  • 3,430
  • 1
  • 13
  • 20
  • Thanks, I was worried this was the case. I'll look into converting the SVG's back into JPGs – iammatthias Feb 21 '17 at 21:40
  • I like the painterly look. Cant you just take the svgs, open them in illustrator and re-export them as jpgs or pngs thereby retaining the look - without the memory overhead? – Korgrue Feb 21 '17 at 22:54
  • 1
    That's an option, but a bit untenable due to how many there are! But I think Primitive has a PNG output - I'll play around with it later this evening. – iammatthias Feb 21 '17 at 22:59