cancelAnimationFrame error Samsung M style android os 2.3.3

ionic-v1
1

TypeError: undefined is not a function
at CALL_NON_FUNCTION (native)
at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:20688:13
at afterReflow (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:31783:11)
at animate (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:32160:9)
at Object.fn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:32189:18)
at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:31132:46
at Array.forEach (native)
at forEach (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:9311:11)
at run (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:31117:11)
at Object.after (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:31157:13) at :1152096194

Error: NOT_FOUND_ERR: DOM Exception 8 at :-1467981467
TypeError: undefined is not a function
at CALL_NON_FUNCTION (native)
at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:20688:13
at afterReflow (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:31783:11)
at animate (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:32160:9)
at Object.fn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:32189:18)
at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:31132:46
at Array.forEach (native)
at forEach (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:9311:11)
at run (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:31117:11)
at Object.after (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:31157:13) at :1200648933

2

I found this and dug deeper before finding this thread, so here comes a few details.

0- This has rendered my application unusable for everything bellow Android 4.4, as it can’t transition states anymore (so it’s the most breaking change I’ve seen so far).

0.5- Testing a new app created from the sidemenu or tabs templates from Ionic doesn’t have this issue on either versions, which show there’s something else on slighly more complex applications that trigger this faulty behaviour.

1- That CALL_NON_FUNCTION pointer, along with the line the TypeError actually points to are wrong, as they actually point to where the console.log was called to log this error. The real error comes from ionic.bundle.js:20688:13 (on the OP case, that is). This confusion happened for me on Android 4.0.2 but didn’t on Android 4.3.

2- The error comes from the new $$RAFProvider (deals with monkey patching requestAnimationFrame) added on Angular.js v1.2.13 IIRC. They’ve patched it for Safari and old versions of Firefox on the following versions, but it seems that some browsers have requestAnimationFrame but not cancelAnimationFrame available, or the monkey patching from angular is bad.

3- To sum it up: cancelAnimationFrame is undefined, but requestAnimationFrame isn’t.

3

So the problem is with angular … hmm … Can you create a reproduce case where this actually happens?

4

@andy, steps to reproduce this error have been posted by @zwz here.

I had to monkey-patch ionic-bundle.min.js in the meanwhile otherwise my app wouldn’t work at all, so where it read var rafSupported = !!requestAnimationFrame; now it reads var rafSupported = !!(requestAnimationFrame && cancelAnimationFrame);.

I’ve posted a comment on one of the many Angular.js issues related to this polyfill, hoping they fix it quickly.
Unless they do, I think this should be a special case in which Ionic would have to downgrade Angular.js version until it’s solved.