I'm developing a website using Next.js and React. It's deployed on Heroku. For the grid we use react-grid-system and for SVGs - react-inlinesvg. Some of the SVGs are stored locally, some of them - on the S3
Honestly, we have a lot of SVGs on this website because almost each block has specially designed wave border (full screen with several wave layers) with different svg images inside it.
On Android or desktop everything loads as it should. But on iPhone (Chrome, Safari) the SVGs are loading so slow, that sometimes I see only rectangular part of it. Sometimes if I scroll quickly I see just white screen instead of the page. When I go through pages quickly Chrome shows grey screen with error that it can't load this page.
Could you please help me to get rid of this bug?
I've already changed the logic of mobile/desktop waves hiding. Instead of doing it with CSS display property, now we use the react-grid-system useScreenClass hook and conditional rendering. Also reduced scroll events.
Just change all of the SVG to <img/> . It will help with a large amount of paths on the iPhones. iPhone has defined memory usage for such rendering and big svgs with a lot of paths crashes it