Mobile Safari - patchTimer breaks for Angular 1 ngAnimate

[d-nation]

I have an Angular 2 app that bootstraps an Angular 1 app using the upgrade-downgrade system. The Angular 1 app uses ngAnimate which seems to be breaking zone.js in mobile safari.
angular.js:13920Error: undefined is not an object (evaluating 'handle.ref')

I'm not very familiar with zone.js, but as best as I can tell, mobile safari's requestAnimation is sending zone a task with no handleId (It breaks here: https://github.com/angular/zone.js/blob/master/dist/zone.js#L1402 and upon inspection, task.data.handleId is undefined).

Is there a polyfill or helper library that I'm missing? I'm currently using the core-js shims.

Thanks!
Dustin

Here's the full stacktrace in case its helpful:

angular.js:13920Error: undefined is not an object (evaluating 'handle.ref') http://localhost:8889/main.bundle.js:64904:27 requestAnimationFrame http://localhost:8889/bower_components/angular/angular.js:16702:41 waitForTick@http://localhost:8889/bower_components/angular/angular.js:5669:12 http://localhost:8889/bower_components/angular/angular.js:5679:18 AnimateRunner@http://localhost:8889/bower_components/angular/angular.js:5736:38 queueAnimation@http://localhost:8889/bower_components/angular-animate/angular-animate.js:2447:39 push@http://localhost:8889/bower_components/angular-animate/angular-animate.js:2391:30 enter@http://localhost:8889/bower_components/angular/angular.js:5457:35 http://localhost:8889/bower_components/angular-route/angular-route.js:1013:29 publicLinkFn@http://localhost:8889/bower_components/angular/angular.js:8499:43 lazyCompilation@http://localhost:8889/bower_components/angular/angular.js:8844:30 boundTranscludeFn@http://localhost:8889/bower_components/angular/angular.js:8637:28 controllersBoundTransclude@http://localhost:8889/bower_components/angular/angular.js:9385:37 update@http://localhost:8889/bower_components/angular-route/angular-route.js:1012:36 $broadcast@http://localhost:8889/bower_components/angular/angular.js:18005:33 http://localhost:8889/bower_components/angular-route/angular-route.js:652:36 processQueue@http://localhost:8889/bower_components/angular/angular.js:16383:30 http://localhost:8889/bower_components/angular/angular.js:16399:39 $eval@http://localhost:8889/bower_components/angular/angular.js:17682:28 $digest@http://localhost:8889/bower_components/angular/angular.js:17495:36 $apply@http://localhost:8889/bower_components/angular/angular.js:17790:31 bootstrapApply@http://localhost:8889/bower_components/angular/angular.js:1761:21 invoke@http://localhost:8889/bower_components/angular/angular.js:4718:24 doBootstrap@http://localhost:8889/bower_components/angular/angular.js:1759:20 bootstrap@http://localhost:8889/bower_components/angular/angular.js:1779:23 http://localhost:8889/main.bundle.js:56398:101 invoke@http://localhost:8889/main.bundle.js:63743:31 onInvoke@http://localhost:8889/main.bundle.js:24799:43 invoke@http://localhost:8889/main.bundle.js:63742:40 run@http://localhost:8889/main.bundle.js:63614:49 run@http://localhost:8889/main.bundle.js:24689:65 bootstrap@http://localhost:8889/main.bundle.js:56398:24 http://localhost:8889/main.bundle.js:44409:22 invoke@http://localhost:8889/main.bundle.js:63743:31 run@http://localhost:8889/main.bundle.js:63614:49 http://localhost:8889/main.bundle.js:64036:60 invokeTask@http://localhost:8889/main.bundle.js:63776:40 runTask@http://localhost:8889/main.bundle.js:63652:57 drainMicroTaskQueue@http://localhost:8889/main.bundle.js:63934:42 PromiseResolutionHandlerFunction@[native code] (anonymous function) — angular.js:13920 (anonymous function) — angular.js:10467 $broadcast — angular.js:18007 (anonymous function) — angular-route.js:652 processQueue — angular.js:16383 (anonymous function) — angular.js:16399 $eval — angular.js:17682 $digest — angular.js:17495 $apply — angular.js:17790 bootstrapApply — angular.js:1761 invoke — angular.js:4718 doBootstrap — angular.js:1759 bootstrap — angular.js:1779 (anonymous function) — main.bundle.js:72866 invoke — main.bundle.js:82058 onInvoke — main.bundle.js:32061 invoke — main.bundle.js:82057 run — main.bundle.js:81919 run — main.bundle.js:31928 bootstrap — main.bundle.js:72864 (anonymous function) — main.bundle.js:57221 invoke — main.bundle.js:82058 run — main.bundle.js:81919 (anonymous function) — main.bundle.js:82352 invokeTask — main.bundle.js:82091 runTask — main.bundle.js:81963 drainMicroTaskQueue — main.bundle.js:82249 PromiseResolutionHandlerFunction

[JiaLiPassion]

Thank you for posting the issue.
based on the spec, requestAnimationFrame should return a animation frame callback identifier for cancel, but it seems some browser or polyfill just return undefined, I'll make a PR to add undefined check for it.

[d-nation]

@JiaLiPassion Thanks for looking at this so quickly! I'm going to attempt to try out your changes today. Some more info for posterity...

Even though zone.js should probably handle this scenario a little better, I did find the culprit on my project. We're using pdf.js which needs https://github.com/mozilla/pdf.js/blob/master/web/compatibility.js for older browser versions. However, they're overriding rAF here: https://github.com/mozilla/pdf.js/blob/master/web/compatibility.js#L553.

I realized that there is a ton of overlap between this library and core-js, so I chopped up compatibility.js and removed its rAF shim (I was already including the Paul Irish shim).

All this having been said, not everyone may be able to do this kind of surgery.

Thanks again for the quick response!
Dustin

[JiaLiPassion]

@d-nation , thank you for the compatibility information, I agree with you, zone.js monkey patch the most basic APIs, it should handle such kind of scenario much gracefully.

[d-nation]

Thanks again @JiaLiPassion and @mhevery!

Any idea when this will hit a release?

[d-nation]

@JiaLiPassion
I tried implementing this, but now I'm getting an error that More tasks executed then were scheduled

d@https://remoteserverurl/main.9d58cc0b5b0fd0389a5d.bundle.js:2008:1754
_updateTaskCount@https://remoteserverurl/main.9d58cc0b5b0fd0389a5d.bundle.js:2008:13719
scheduleTask@https://remoteserverurl/main.9d58cc0b5b0fd0389a5d.bundle.js:2008:12863
scheduleMacroTask@https://remoteserverurl/main.9d58cc0b5b0fd0389a5d.bundle.js:2008:7246
https://remoteserverurl/main.9d58cc0b5b0fd0389a5d.bundle.js:1987:507
requestAnimationFrame
https://remoteserverurl/js/vendor-e486e7a48b.js:6:18946
waitUntilQuiet@https://remoteserverurl/js/vendor-e486e7a48b.js:10:1833
T@https://remoteserverurl/js/vendor-e486e7a48b.js:10:3104
E@https://remoteserverurl/js/vendor-e486e7a48b.js:10:4905
https://remoteserverurl/js/vendor-e486e7a48b.js:10:7875
v@https://remoteserverurl/js/vendor-e486e7a48b.js:10:10652
https://remoteserverurl/js/vendor-e486e7a48b.js:10:10865
C@https://remoteserverurl/js/vendor-e486e7a48b.js:10:21511
fn@https://remoteserverurl/js/vendor-e486e7a48b.js:10:24678
n@https://remoteserverurl/js/vendor-e486e7a48b.js:10:1737
t@https://remoteserverurl/js/vendor-e486e7a48b.js:10:1665
https://remoteserverurl/js/vendor-e486e7a48b.js:10:22704
$digest@https://remoteserverurl/js/vendor-e486e7a48b.js:6:23594
$apply@https://remoteserverurl/js/vendor-e486e7a48b.js:6:24643
u@https://remoteserverurl/js/vendor-e486e7a48b.js:5:33785
w@https://remoteserverurl/js/vendor-e486e7a48b.js:6:970
onload@https://remoteserverurl/js/vendor-e486e7a48b.js:6:1442
invoke@https://remoteserverurl/main.9d58cc0b5b0fd0389a5d.bundle.js:2008:12373
onInvoke@https://remoteserverurl/main.9d58cc0b5b0fd0389a5d.bundle.js:520:2681
invoke@https://remoteserverurl/main.9d58cc0b5b0fd0389a5d.bundle.js:2008:12316
runGuarded@https://remoteserverurl/main.9d58cc0b5b0fd0389a5d.bundle.js:2008:6503
https://remoteserverurl/main.9d58cc0b5b0fd0389a5d.bundle.js:2008:6135

where main.bundle is angular 2, and vendor.js is angular 1.

The rAF calls looks like they're coming from angular-animate. Would the fix from #628 cause this?

[JiaLiPassion]

@d-nation , could you provide a reproduce repository? thank you.

Can you confirm that whether cancelAnimationFrame is called or not?
if that is the case, the "More tasks executed then were scheduled" may occur. And the solution is make a Pull request to https://github.com/mozilla/pdf.js/blob/master/web/compatibility.js#L553 return the timeoutId from fakeRequestAnimationFrame.

[d-nation]

I will try. Give me a few days.

[d-nation]

I've been unable to make time to reproduce this. Sorry. We just ended up temporarily dropping ng-animate in order to ship. When I make time, I'll open another issue if I think there's a problem with zone.

Thanks again folks!