Animations not working on iOS 12 / 13: animate is undefined

Which @angular/* package(s) are the source of the bug?

animations

Is this a regression?

Yes

Description

I have found a regression in Angular animations v13.2.2 for users using iOS v13 and older versions. Please find the stack trace attached.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Error: D.animate is not a function. (In 'D.animate(P,Y)', 'D.animate' is undefined)
			_triggerWebAnimation@...:1:1039926
			_buildPlayer@...:1:1039652
			play@...:1:1040066
			play@...:1:1034903
			...:1:1031449
			forEach@[native code]
			_flushAnimations@...:1:1031324
			flush@...:1:1026173
			flush@...:1:1037791
			...:1:1045273
			run@...:1:11157
			end@...:1:1045224
			$_@...:1:810666
			Zl@...:1:817366
			$d@...:1:817386
			detectChanges@...:1:855490
			tick@...:1:885371

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 13.2.2
Node: 16.13.0
Package Manager: npm 8.1.0
OS: win32 x64

Angular: 13.2.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.2
@angular-devkit/build-angular   13.2.2
@angular-devkit/core            13.2.2
@angular-devkit/schematics      13.2.2
@angular/cli                    13.2.2
@angular/fire                   7.2.0
@schematics/angular             13.2.2
rxjs                            7.5.2
typescript                      4.5.5

Anything else?

No response

[sburnicki]

I observed that only a couple of our users are still using Safari < 14, which are the users with an iPhone 6 as they are stuck with iOS 12. So I first decided to not increase the bundle size, but only load web-animations polyfill for those users:

npm i -D web-animation-js

angular.json:

{
...
"projects:" {
  ...
  "architect": {
    ....
    "build": {
      ...
      "scripts": [
              {
                "input": "node_modules/web-animations-js/web-animations.min.js",
                "inject": false,
                "bundleName": "web-animations-js"
              }
            ],

ployfills.ts:

if (!('animate' in document.documentElement) || (navigator && /iPhone OS (8|9|10|11|12|13)_/.test(navigator.userAgent))) {
  const script = document.createElement('script');
  script.src = 'web-animations-js.js';
  document.head.appendChild(script);
}

This worked fine. But after all I chose another approach by reverting the steps above and disable animations for those people with iPhone6/old Safari, because they have a hard time anyway and lagging animations don’t add to a good user experience:

app.module.ts

const disableAnimations =
  !('animate' in document.documentElement)
  || (navigator && /iPhone OS (8|9|10|11|12|13)_/.test(navigator.userAgent));


@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule.withConfig({ disableAnimations }),
...

[javiermarinros]

To fix this issue, I’m using this snippet at polyfills.ts:

// TypeError: D.animate is not a function
if (!('animate' in document.documentElement) || (navigator && /iPhone OS (8|9|10|11|12|13)_/.test(navigator.userAgent))) {
  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/web-animations-js@2.3.2';
  document.head.appendChild(script);
}