My site is about ready to be published and seems to be working as expected on both chrome and safari browsers on laptop. On iPhone, however, upon loading the page:
the site glitches around and struggles to load the animated gsap element (the cards depicting the alumni course members)
safari will attempt to reload the page several times
scrolling down past the hero page will almost always cause the page to reload
there is general lag and unresponsiveness
→ this culminates in the safari browser showing a blank page with the error message: A problem repeatedly occurred on “https://ptya.webflow.io/”
I’ve tried troubleshooting using the following link already (Layout and Design - "A problem repeatedly occurred” error on iOS 15.5), but to no avail. I cannot locate a single instance of an image element being given a background image by mistake (or indeed a CMS image). I do have CMS images, and my gut tells me that safari doesn’t love my opening hero cards, but any image elements have the dynamic style settings of ‘get image from’ not ‘get BG image from’ - so I can’t troubleshoot here either.
Any help really appreciated - It’s currently holding up my hand-over with client, so I’m a little nervy !
Hey! I can’t tell anything that is immediately wrong but my guess would be you are hitting up against some sort of memory limit…? The page takes a super long time to completly execute all the JS related to the video embeds. My guess is the sheer number of Youtube + Vimeo embeds is crippling the site in Safari on mobile and causing it to crash.
I recorded the timeline of the load on safari desktop and it takes 15s plus for all the video embeds from youtube and vimeo to fully load in and for Safari to view the page as fully loaded.
The payload for antire page load is 29MB which is HUGE especially for a mobile browser like safari to handle.
I’d look at cutting down on the number of youtube + vimeo embeds on the home page and make absolutely sure that all your images are optimized either on your own or convert as many of them to WebP as possible with Webflow’s tool.
It looks like you may be blowing past the limit that mobile safari allows for video and image-related data.
This isn’t a Webflow issue it’s a hard cap on the resources mobile safari will use to render a page. From what I can tell the multiple reloads are safari attempting to fail gracefully but when it can’t it just throws an error vs showing the site in a crippled state where even scrolling may not work.
I’ve tried hiding the video / twitter embed elements on phone view, but still run into the same problem. Am I correct in assuming that ‘hiding’ elements, still loads them on the page (despite them being hidden), and thus will not help with page loading speeds?
Instead of using the native webflow video widget, I embedded the videos with lazy-loading attached. This has helped a little. I think the main bulk now is being caused by the twitter embeds.
Do you know if there are ways to also lazy load these? I wasn’t sure if it was as simple as adding a line of code within the embed, I can’t seem to find much online.
If it were you, and you needed to include these tweets as per the client, do you think you’d go for a full page spread of screenshots (ie: a single, optimised png image, without links to the tweets) instead of the carousel of embeds? I feel like this would drastically reduce the page bloat.
Hey! Glad that you’re seeing a little improvement this script/library: Lazy Scripts might be something to look into. Or something like this tweetscreenshot or this codepen example might work
If these look too complex I’d just go with the image of all the tweets you are trying to embed. I’d venture a guess that this might completely solve the rest of the issue
Good morning,
I’ve been having issues for months with an error message on iOS on iPhone that says A problem repeatedly occurs…
I thought that it had been resolved with iOS updates but it seems to be worse than ever now. It looks like you’re familiar with this having helped Henry with it months ago and I wondered if you might have some insight for me.
The error message is occurring only on clicking on Team Portal pages at the top of the page (try TMPFF or HP2FF under Team Portal) where there are quite a few vimeo video links on each page. However, this problem was not occurring a year ago and the same number of links were still present at that point. Any help you could offer would be MUCH appreciated as I’m at a loss and need my clients to be able to access their pages on their iPhones and not just a laptop. Thank you!
this script/library: 