I’m using Ionic 7, Capacitor 5, and Angular 16. I’m not explicitly creating any web animations, but I can see in Safari Web Inspector under the Graphics tab that each time I navigate to a different page in my app there are web animations being created. Each time I navigate to a given page then web animations for that page are re-created causing duplicate web animations. Old web animations never get cleaned up and eventually there are so many that Web Inspector crashes when you try to click on the Graphics tab, and then eventually there are so many web animations that my Ionic app’s webview crashes. I’ve tried cancelling web animations by using code such as:
document.querySelectorAll(‘*’).forEach((element: Element) => {
const animations = (element as HTMLElement).getAnimations();
animations.forEach(animation => animation.cancel());
})
However, the getAnimations() functions never returns any animations. I’ve tried executing this code during Angular’s NavigationStart event, and also even during a button click event after the page has loaded.
Below is a screenshot of Web Inspector to show an example of the web animations getting created. Can anyone please let me know what is creating these animations and how they can be cleaned up? Thank you!
