I have developed this website using NextJS and deployed it to Vercel. The website is running fine and fast on all devices. However, on this specific page (community life) page, the page crashes whenever I open it in mobile devices. I'm confused on why this happens and how I can troubleshoot this.
Update
Since I am using Framer Motion for animations on the page, I have decided to remove the animation when it's in mobile view. How I did this by is by checking the screen width and if it's less than 768px, then I want my NextJS to render components without framer motion. It gets the page running longer (doesn't crash immediately) but it still crashes after awhile. What else can I do to prevent it from crashing in mobile view?
I found the issue is related to this file https://pgu2022.vercel.app/_next/static/css/71c9678f5295262f.css
If you remove the above stylesheet, the page renders fine and does not crash.
I can replicate the issue in a codesandbox - https://codesandbox.io/s/wonderful-star-17cihu?file=/index.html:1156-1220
Couple of things I would note :
- There is a background image that is 880kb and 1900px wide - this might be taxing from a memory viewpoint and the browser (iOS Safari) decides to reload to conserve memory
- There might be some interaction with addition of styling being assigned as you scroll down.
- This issue does not replicate on an emulator or in Safari responsive design mode - so its a device specific quirk.
- Memory profiling indicates a spike when loading and scrolling down - there is simply too much to redraw!
Overall, while I do not have the exact line I am sure you can find the culprit - best of luck!