Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>Note</strong>: It looks like UIWebView does not support requestAnimationFrames. Thanks to <a href="https://stackoverflow.com/users/552445/guillaume-gendre">Guillaume Gendre</a> for pointing it out!</p> <p>We ran into a similar issue with a web app we're working on.</p> <p>For us, it was touchmove that caused issues. We implemented a workaround (found here: <a href="https://gist.github.com/3755461" rel="nofollow noreferrer">https://gist.github.com/3755461</a>) 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.)</p> <p>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.</p> <p>For example:</p> <pre><code>setTimeout(function(){alert("HI")}, 1000); // using native setTimeout(function(){alert("HI")}, 1000, true); // using workaround </code></pre> <p>Here are additional ways to use the workaround:</p> <pre><code>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); </code></pre> <p>Here are two fiddles with the workaround examples. Try pinch/zooming on the black squares:</p> <p><a href="http://jsfiddle.net/xKh5m/embedded/result" rel="nofollow noreferrer">http://jsfiddle.net/xKh5m/embedded/result</a> (Uses native <code>setTimeout</code> function) <a href="http://jsfiddle.net/ujxE3/embedded/result" rel="nofollow noreferrer">http://jsfiddle.net/ujxE3/embedded/result</a></p> <p>We've been using this workaround for a few months in a production environment, and have not run into any major issues.</p> <p>Here's a public gist of the workaround: <a href="https://gist.github.com/4180482" rel="nofollow noreferrer">https://gist.github.com/4180482</a></p> <p>Here's more information about requestAnimationFrames:</p> <p><a href="https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame" rel="nofollow noreferrer">MDN documentation</a></p> <p><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/" rel="nofollow noreferrer">Paul Irish on requestAnimationFrame</a></p> <p>Good luck!</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload