From 9bee0f0879da33191bf4d81cb01781f3fb6186c8 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 27 Apr 2018 11:53:56 -0400
Subject: [PATCH] fix(toast): only use constant and env if supported (#14399)

---
 .../src/components/toast/animations/ios.enter.ts | 15 +++++++++++++--
 .../src/components/toast/animations/ios.leave.ts | 16 ++++++++++++++--
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/core/src/components/toast/animations/ios.enter.ts b/core/src/components/toast/animations/ios.enter.ts
index 48f1e5745f7..c8235d52986 100644
--- a/core/src/components/toast/animations/ios.enter.ts
+++ b/core/src/components/toast/animations/ios.enter.ts
@@ -10,9 +10,20 @@ export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElem
   const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
   wrapperAnimation.addElement(wrapperEle);
 
+  let variable;
+
+  if (CSS.supports('bottom', 'env(safe-area-inset-bottom)')) {
+    variable = 'env';
+  } else if (CSS.supports('bottom', 'constant(safe-area-inset-bottom)')) {
+    variable = 'constant';
+  }
+
+  const bottom = variable ? 'calc(-10px - ' + variable + '(safe-area-inset-bottom))' : '-10px';
+  const top = variable ? 'calc(' + variable + '(safe-area-inset-top) + 10px)' : '10px';
+
   switch (position) {
     case 'top':
-      wrapperAnimation.fromTo('translateY', '-100%', 'calc(env(safe-area-inset-top) + 10px)');
+      wrapperAnimation.fromTo('translateY', '-100%', top);
       break;
     case 'middle':
       const topPosition = Math.floor(
@@ -22,7 +33,7 @@ export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElem
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
     default:
-      wrapperAnimation.fromTo('translateY', '100%', 'calc(-10px - env(safe-area-inset-bottom))');
+      wrapperAnimation.fromTo('translateY', '100%', bottom);
       break;
   }
   return Promise.resolve(baseAnimation
diff --git a/core/src/components/toast/animations/ios.leave.ts b/core/src/components/toast/animations/ios.leave.ts
index b4e4a613678..22c325fc45c 100644
--- a/core/src/components/toast/animations/ios.leave.ts
+++ b/core/src/components/toast/animations/ios.leave.ts
@@ -9,15 +9,27 @@ export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElem
   const wrapperAnimation = new Animation();
   const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
   wrapperAnimation.addElement(wrapperEle);
+
+  let variable;
+
+  if (CSS.supports('bottom', 'env(safe-area-inset-bottom)')) {
+    variable = 'env';
+  } else if (CSS.supports('bottom', 'constant(safe-area-inset-bottom)')) {
+    variable = 'constant';
+  }
+
+  const bottom = variable ? 'calc(-10px - ' + variable + '(safe-area-inset-bottom))' : '-10px';
+  const top = variable ? 'calc(' + variable + '(safe-area-inset-top) + 10px)' : '10px';
+
   switch (position) {
     case 'top':
-      wrapperAnimation.fromTo('translateY', 'calc(env(safe-area-inset-top) + 10px)', '-100%');
+      wrapperAnimation.fromTo('translateY', top, '-100%');
       break;
     case 'middle':
       wrapperAnimation.fromTo('opacity', 0.99, 0);
       break;
     default:
-      wrapperAnimation.fromTo('translateY', 'calc(-10px - env(safe-area-inset-bottom))', '100%');
+      wrapperAnimation.fromTo('translateY', bottom, '100%');
       break;
   }
   return Promise.resolve(baseAnimation