Catch animation errors for ::backdrop

Author: aryanpingle

src/client/lazy-app/Modal/index.tsx

@@ -56,11 +56,14 @@ export default class Modal extends Component<Props, State> {
       { duration: 250, easing: 'ease' },
     );
     // animate modal::backdrop
-    animateTo(this.dialogElement, [{ opacity: 0 }, { opacity: 1 }], {
-      duration: 250,
-      easing: 'linear',
-      pseudoElement: '::backdrop',
-    });
+    // some browsers don't support ::backdrop, catch those errors
+    try {
+      animateTo(this.dialogElement, [{ opacity: 0 }, { opacity: 1 }], {
+        duration: 250,
+        easing: 'linear',
+        pseudoElement: '::backdrop',
+      });
+    } catch (e) {}
     this.setState({ shown: true });
   }
 
@@ -75,11 +78,14 @@ export default class Modal extends Component<Props, State> {
       { duration: 250, easing: 'ease' },
     );
     // animate modal::backdrop
-    animateTo(this.dialogElement, [{ opacity: 0 }], {
-      duration: 250,
-      easing: 'linear',
-      pseudoElement: '::backdrop',
-    });
+    // some browsers don't support ::backdrop, catch those errors
+    try {
+      animateTo(this.dialogElement, [{ opacity: 0 }], {
+        duration: 250,
+        easing: 'linear',
+        pseudoElement: '::backdrop',
+      });
+    } catch (e) {}
     anim.onfinish = this._closeOnTransitionEnd;
   }
 

src/client/lazy-app/util/index.ts

@@ -19,8 +19,10 @@ export function animateTo(
 ) {
   const anim = element.animate(to, { ...options, fill: 'both' });
   anim.addEventListener('finish', () => {
-    if (!('pseudoElement' in options && options['pseudoElement']))
+    // pseudo-elements don't support inline styles at the moment, catch those errors
+    try {
       anim.commitStyles();
+    } catch (e) {}
     anim.cancel();
   });
   return anim;