Seeing an increase API timeout errors on abandoned jQuery ajax calls in Safari after iOS 18 update

Question

Reported Issue:

• An increase in page reloads and "A problem repeatedly occurred…" error pages for iPhone users on our mobile site.

Data from Metrics:

• 95% of API Timeout errors on calls made from our search bar live results while typing are coming from iPhone devices on the mobile site while only 40% of traffic is from iPhone users.

Research:

• Our search bar makes a live search just before the user initiates the search which triggers a page load.
• The ajax call for live search is abandoned before the response and shows no response in the network history.
• The live search call typically gets a response within 150-200 milliseconds once initiated after debounce.
• Other forum posts and questions describe similar behavior with Safari in the past.
• Apple release iOS 18 to the public on September 16th which coincides with the reported errors.

We tried modifying the ajax call with async: true but still saw the same API timeout error in metrics monitoring.

We cannot use abort as the call is to a different domain than our website.

I found only a few other questions on stackoverflow specific to how Safari handles an abandoned ajax call with no response. The typical quick fix did not work and the issue has exploded since the release of iOS 18 specifically so I feel this warrants a dedicated question.

Answer 1

We had an increase in customer reports about this just before Christmas, and it was quite hard to pinpoint the problem. There seems to be a change in how memory and resources are allocated in iOS 18, without knowing the specifics, that causes resource intensive webpages to crash. The same happens on googles deepmind landing page for instance.

Our solution was a combination of multiple steps. Among other things, we had scroll-listeners that did stuff, causing repaints and reflows, which we refactored to use IntersectionObserver instead. Stuff like getBoundingClientRect() will also trigger repaints, and cause the memory and CPU to spike if triggered repeatedly.

Also, if you use stuff like clarity or HotJar to make recordings of your users interactions, this will further eat resources on the client. I suspect all, or some of these issues causes the webpage to take up just enough resources for iOS to say “stop”, and it attempts to reload the page, only to see a similar spike in resources again, effectively shutting the tab down.

We successfully confirmed that this was not an issue in previous iOS versions, and even tested on and iPhone 6 with iOS 15. The make and model of iPhone/iPad does not matter, and neither does the browser used.

I recommend using the dev tools in your browser to see if you can pinpoint spikes in CPU/GPU usage when interacting with your web app. Use this as a baseline to improve the overall performance and I think you’ll get this fixed :)

Hope this helps you get closer to figure out what causes the error in your application!

Answer 2

Apple has released a new version iOS 18.0.1. It fix the problem