fix(toast): only use constant and env if supported (#14399)

ionic-team · Apr 27, 2018 · 9bee0f0 · 9bee0f0
1 parent 329a348
commit 9bee0f0
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git 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
@@ -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