iOS 6 js events function not called if has setTimeout in it

Question

I noticed this strange behaviour with the latest iOS (iOS 6). If calling a function for any touch event which has a setTimeout inside, the part inside the setTimeout is never triggered.

This happens only when there is a "system animation" such as scroll and zoom-in/out.

For example:

http://jsfiddle.net/p4SdL/2/

(I used jquery just for testing but the same happens with pure js)

Open that page with safari on any iOS 6 device and zoom in or out. The alert will never be called.

If tested on any iOS 5 device this will work just fine! It seems that during these animations the setTimeout or setInterval are reset by the OS. Is this the intended behaviour or a bug?

Thanks

Solution

Note: It looks like UIWebView does not support requestAnimationFrames. Thanks to Guillaume Gendre for pointing it out!

We ran into a similar issue with a web app we're working on.

For us, it was touchmove that caused issues. We implemented a workaround (found here: https://gist.github.com/3755461) that seemed to work pretty well until another issue forced us to abandon it. (I tried adding the workaround to your fiddle and was able to get the timer to fire once or twice, but it required a weird gesture+scroll event that was damn near impossible to consistently reproduce.)

Anyway, one of the new features in iOS 6 for developers are requestAnimationFrames. My workaround is basically a wrapper for timers, allowing the developer to pass a boolean, which will call either the native function or the workaround function.

For example:

setTimeout(function(){alert("HI")}, 1000); // using native
setTimeout(function(){alert("HI")}, 1000, true); // using workaround

Here are additional ways to use the workaround:

setInterval(function(){console.log("Interval")}, 1000, true);

var timer = setTimeout(function(){ /* ... */ }, 60000, true);
clearTimeout(timer);

var interval = setInterval(someFunc, 10000, true);
if(someCondition) clearInterval(interval);

Here are two fiddles with the workaround examples. Try pinch/zooming on the black squares:

http://jsfiddle.net/xKh5m/embedded/result (Uses native setTimeout function) http://jsfiddle.net/ujxE3/embedded/result

We've been using this workaround for a few months in a production environment, and have not run into any major issues.

Here's a public gist of the workaround: https://gist.github.com/4180482

Here's more information about requestAnimationFrames:

MDN documentation

Paul Irish on requestAnimationFrame

Good luck!

Comments

[kiwi1342]

thanks for your very detailed answer but as you mentioned this isn't the correct solution to my problem. But now, I think that this is a bug introduced in iOS6 and not some new feature.

[Glenn Maynard]

Looks like a solution to me.

[eivers88]

This is huge, saved me a headache for sure. More people need to see this solution

[Guillaume Gendre]

Hi! in my case (a setTimeout that was not called at all when the webview was pullToRefresh-ed) the first one worked (gist.github.com/ronkorving/3755461) but not the second (gist.github.com/jpattishall/4180482). What kind of problem did you meet with the first one?

[Jack]

Hi Guillaume - That's odd Apple decided not to implement requestAnimationFrame in UIWebView. Looks like the solution would only be applicable for Mobile Safari. We ran into two problems: Gesture based events not triggering a scroll event (similar to OP's question) and webkitOverflowScrolling (I believe) triggering multiple scroll events. This resulted in the first fix resetting our timers hundreds/thousands of times (thus slowing down/crashing our web app) -- In hindsight, we should have just debounced the scroll event. I'll update the answer/gist with the UIWebView note. THANKS!

[Jack]

Hi @Abadaba, this fix shouldn't be required in iOS 7. This specific bug was only present between iOS 6.0 through iOS 6.0.1. Thanks!

[Jack]

@TaylorMac - Just tested on iOS 7.0.6 and had no issues (both with native setTimeout and using the RAF approach). Any chance you have code that's reproducible on iOS 7? Thanks!

[TaylorMac]

Jack, just re-tested after a few commits, and everything seems to be working now. Sorry for the false alarm!

[trainoasis]

It would seem I need this on iOS 7.1.2 still (native setTimeout won't fire ..)