From 02234f69e0333266b4d500f24b3bb002c099bda2 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 22 Sep 2022 13:43:47 -0500 Subject: [PATCH] fix(animation): improve compatibility with ssr (#25992) resolves #25987 --- core/src/utils/animation/animation-utils.ts | 3 ++- core/src/utils/animation/animation.ts | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/core/src/utils/animation/animation-utils.ts b/core/src/utils/animation/animation-utils.ts index 2779426bcb..a51ff277a5 100644 --- a/core/src/utils/animation/animation-utils.ts +++ b/core/src/utils/animation/animation-utils.ts @@ -114,7 +114,8 @@ export const generateKeyframeName = (keyframeRules: string) => { }; export const getStyleContainer = (element: HTMLElement) => { - const rootNode = element.getRootNode() as any; + // getRootNode is not always available in SSR environments. + const rootNode = element.getRootNode !== undefined ? (element.getRootNode() as any) : element; return rootNode.head || rootNode; }; diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts index a426952730..25a866a5de 100644 --- a/core/src/utils/animation/animation.ts +++ b/core/src/utils/animation/animation.ts @@ -1,4 +1,5 @@ import { raf } from '../helpers'; +import { win } from '../window'; import type { Animation, @@ -83,7 +84,8 @@ export const createAnimation = (animationId?: string): Animation => { const _afterAddWriteFunctions: any[] = []; const webAnimations: any[] = []; const supportsAnimationEffect = - typeof (AnimationEffect as any) === 'function' || typeof (window as any).AnimationEffect === 'function'; + typeof (AnimationEffect as any) === 'function' || + (win !== undefined && typeof (win as any).AnimationEffect === 'function'); const supportsWebAnimations = typeof (Element as any) === 'function' && typeof (Element as any).prototype!.animate === 'function' &&