Ionic 5 Google Map Marker breaking animations on IOS

Issue

I'm adding google map on an ionic app using google maps javascript api 3. The map works fine but the minute i add marker on the map, the cordova animations stop working on ios, on android everything works smoothly. For example clicking on ion-select or adding Alert produces following error

Unhandled Promise rejection: – "undefined is not a function (near '...element.animate...')" – "; Zone:" – "" – "; Task:" – "Promise.then" – "; Value:" (2) TypeError: undefined is not a function (near '...element.animate...') —

 animation-5559213c.js:652 (anonymous function) — 
 animation-5559213c.js:652 forEach initializeWebAnimation — 
 animation-5559213c.js:651   initializeAnimation —
 animation-5559213c.js:674 play — animation 5559213c.js:950 (anonymous
 function) — 
 animation-5559213c.js:961 forEach play —
 animation-5559213c.js:960 (anonymous function) —
 animation-5559213c.js:852 ZoneAwarePromise — zone.js:910 playAsync —
 animation-5559213c.js:850 (anonymous function) —
 overlays-10cf2041.js:202 step — tslib.es6.js:99 fulfilled —
 tslib.es6.js:70 run — zone.js:150 (anonymous function) — zone.js:889
 runTask — zone.js:195 drainMicroTaskQueue — 
 zone.js:601 promiseReactionJob

My app's ionic version is 5.2.3. Any help would be appreciated.

Solution

Import the web-animations-js polyfill.

Run npm install --save web-animations-js in the terminal then uncomment the following line in src/polyfills.ts:

import 'web-animations-js';

Answered By - nullptr.t