Trop de SVG pour un safari mobile?

Question

Je travaille sur une galerie photoswipe pour mon site portfolio, construit en utilisant Hugo. Le code n'est pas le plus propre, mais c'est une mise à niveau énorme de ma version actuelle en utilisant HarpJS. J'ai également beaucoup appris sur AWS et GCP dans le processus.

Tout fonctionne sur le bureau, et jusqu'à hier, tout a fonctionné sur mobile.

J'ai exécuté Primitive sur toutes les vignettes, et de produire des SVG avec 2500 formes. Ce qui est probablement une surcharge excessive, mais j'aime l'effet visuel de ce niveau de détail. Il devient très pictural.

Maintenant, la page se bloque constamment dans Mobile Safari, ce qui ferme stupidement l'inspecteur Web mobile sur mon Mac - donc je ne sais pas où la panne se produit.

Chaque SVG est d'environ ~ 150kb. Lorsque j'échange les fichiers SVG et que j'utilise à nouveau JPG, tout fonctionne correctement, même si cela augmente la taille de la page. J'ai un soupçon que mon plugin de chargement paresseux ne fonctionne pas, mais je ne suis pas certain. (J'utilise Dévoiler - luis-almeida.github.io/unveil.)

Voici un lien vers la page de la galerie sur mon seau mise en scène: staging.iammatthias.com

Toute aide/conseils serait très apprécié!

Answer 1

Il s'agit sans aucun doute d'un problème de limitation de mémoire. Safari mobile est connu pour avoir des limitations de mémoire quand il s'agit de rendre svgs. Il y a des articles pour expliquer le problème - mais cela revient à limiter strictement le nombre de SVG que vous lancez sur une page à rendre en même temps (votre site se bat même sur le safari de bureau avec tous ces SVGs). Le seul moyen de contourner cela avec iOS est de charger paresseux les images de votre serveur quelques unes à la fois ou passer à ne pas utiliser les SVG pour ce cas d'utilisation.

quelques liens pour des lectures complémentaires:

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

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