Error while evaluating requestAnimationFrame(fn) in angular.js:11328 for old browsers

[chandan-singh]

Version: Angular.js 1.2.14
Line-number: 11328

In older version of browsers (such as QtWebKit), requestAnimationFrame was not available so when user migrate from 1.2.13 to 1.2.14, she may encounter following error: "'undefined' is not a function (evaluating 'requestAnimationFrame(fn)')". In my case , it is being called from angular.js:9509.

[lefos987]

Hi @chandan-singh . Thank you for this. Can you please provide an example that reproduces this issue for you? Is this something that happened only for QtWebKit or did you get the same problem in other browsers as well? If yes, which are these "old browsers" that cause the issue?

[functionportal]

Any browser that doesn't support this: https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame will get function undefined errors.

[lefos987]

This is introduced by commit 04d7317
Check #6535 and #6601 where a similar issue is already raised.
There is an open PR #6540 to fix the issue for old versions of FF.

[IgorMinar]

we should add moz prefix to

angular.js/src/ng/raf.js

Lines 5 to 9 in 04d7317

	var requestAnimationFrame = $window.requestAnimationFrame ||
	$window.webkitRequestAnimationFrame;
	var cancelAnimationFrame = $window.cancelAnimationFrame ||
	$window.webkitCancelAnimationFrame;

and create a fallback via $timeout for browsers that don't have rAF.

@matsko what do you think?

[IgorMinar]

#6535 contains references to patches

[IgorMinar]

I merged #6540 which fixes FF specific variant of this issue

[lefos987]

PR #6691 by @matsko should fix the issue for all browsers that do not support requestAnimationFrame since it adds a $timeout fallback.

[matsko]

Perfect. I was looking for this issue number to reference in the commit message.

[matsko]

Fixed. Landed as 7b5e019

[fredgalvao]

Using Angular.js v1.2.17 through Ionic (which recently updated from 1.2.12 on ionic-team/ionic-framework@89d5553), and this now fails for me on any Android devices below 4.4 (tested on 4.0.2 and 4.3), causing pretty much everything else to fail on my application.

The failing part is cancelAnimationFrame, which is undefined.

[matsko]

@fredgalvao do you mean: https://github.com/angular/angular.js/blob/master/src/ng/raf.js#L9

Could you possibly open up a new issue?

[matsko]

@fredgalvao is the issue that with Android version < 4.4 that it doesn't have a cancelAnimationFrame method at all?

[ajoslin]

@matsko the issue looks to be with line 14 of raf, which causes an error on line 19.

Some Android browsers do have requestAnimationFrame support, but not cancelAnimationFrame.

If line 14 was changed to var rafSupported = !!(requestAnimationFrame && cancelAnimationFrame), it would work.

I'll open a pull request.

[ajoslin]

Nevermind, this is actually Ionic's problem. I just looked at our raf polyfill, and we overwrite window.requestAnimationFrame with our fallback. I think this was accidentally done in a pull request that fixed something else. This is not a problem with angular.

EDIT: fixed now in Ionic via ionic-team/ionic-framework@ae8136d

[fredgalvao]

Although I agree that my issue itself was caused by Ionic (with the new insight from @ajoslin), I think a safer condition on line 14 is still welcome, as I actually remember reading people talk about browsers that had requestAnimationFrame but didn't have cancelAnimationFrame on the original polyfill from Paul Irish here.

[austinpray]

Is this fix available as a 1.2.x release?

Nevermind, found it: https://github.com/angular/angular.js/commits/eba192b8638192168e6ba44bdd887172e5321281?page=15